WordPressのログイン時のツールバー

WordPress

WordPressの囲み型ショートコードの基本的な使い方

WordPressのショートコードはとても便利で色々なことができるんですが、今回は囲み型ショートコードを使ってみました。ちなみに囲み型ではない方のショートコードは「WordPressで自分だけのショートコードの作り方」を参考にしてみて下さい。ショートコードに自分がよく使うクラス名をつけたHTMLタグなんかを登録しておくと作業も捗りますよね。囲み型ショートコードはタグ打ちみたいな感覚でめんどくさいHTMLをいちいち打たなくてもいいのでとても便利かと思います。ということで以下使い方です。

[ads_center]

使い方

基本的な使い方はfunctions.phpに以下のように記述して使います。

function link_shortcode( $atts, $content = null ) {
    return '<p class="link">' . $content . '</p>';
}
add_shortcode('link', 'link_shortcode');

そして、実際の投稿画面で次のようにして使います。

[link]ここはリンクです[/link]

// 出力されるHTML
<p class="link">ここはリンクです</p>

ちなみに$contentは、エスケープやエンコードされないのでHTMLを同時に書いても大丈夫みたいです。

[link]<a href="http://bl6.jp/">bl6.jp</a>[/link]

// 出力されるHTML
<p class="link"><a href="http://bl6.jp/">bl6.jp</a></p>

引数を渡す

引数を渡せるようにするとさらに便利になりますね!渡すようにするにはこんな感じでfunctions.phpに記述していきます。

function link_shortcode( $atts, $content = null ) {
    extract( shortcode_atts( array(
        'class' => 'link',
    ), $atts ) );
    return '<p class="' . $class . '">' . $content . '</p>';
}
add_shortcode('link', 'link_shortcode');

上記は指定した引数がクラス名として渡されます。実際に使う場合は次のようにして使います。

[link class="sample"]<a href="http://bl6.jp/">bl6.jp</a>[/link]

// 出力されるHTML
<p class="sample"><a href="http://bl6.jp/">bl6.jp</a></p>

sampleというクラス名を引数として渡しています。何も渡さない場合はデフォルトで指定しているlinkというクラス名が付けられます。

複数の引数を渡したい

さらに複数の引数を渡せるようにするには、単純に渡す引数を追加していくだけ大丈夫です。

function link_shortcode( $atts, $content = null ) {
    extract( shortcode_atts( array(
        'class' => 'link',
        'href' => 'http://bl6.jp/',
    ), $atts ) );
    return '<p class="' . $class . '"><a href="' . $href . '">' . $content . '</a></p>';
}
add_shortcode('link', 'link_shortcode');

実際に使う場合も引数を追加するだけでOKです!

[link class="sample" href="http://b.hatena.ne.jp/"]はてなブックマーク[/link]

// 出力されるHTML
<p class="sample"><a href="http://b.hatena.ne.jp/">はてなブックマーク</a></p>

こんな感じで自分がよく使うHTMLなんかを登録しておくと記事作成の効率も良くなるかと思います。

で、あとは上記のショートコードをWordPressプラグイン「AddQuicktag」に登録しておくと、さらに楽になるかと思います。AddQuicktagの使い方に関しては以前記事にしていますのでよろしければそちらもどうぞ。

参考サイト

関連記事

  1. WordPress

    ブログ投稿を更新したら自動でツイートしてくれるWordPressプラグイン「WordTwit」を使っ…

    なんというか、毎回些細なこととはいえブログを更新する度に手動でツイート…

  2. WordPressの自動バックグラウンド更新

    WordPress

    WordPressで複数のウィジェットを表示させるやり方

    WordPressのウィジェットってとても便利ですよね。ドラッグ&ドロ…

  3. WordPress

    WordPressのショートコードをテンプレート(テーマ)内で使用したい時のやり方

    WordPressのショートコードってとても便利ですよね。AddQui…

  4. WordPress

    WordPressでアイキャッチ画像を使う場合のサイズ設定や画像ありなし時の振り分けなど

    WordPressにあるアイキャッチ画像がとても便利で、自分もWord…

  5. WordTwit

    WordPress

    WordTwitの設定方法や日本語化してからの使い方について

    WordTwitはWordPressで記事を投稿した時に自動でツイート…

  6. WordPress

    WordPressで指定した固定ページを読み込む方法

    WordPressで例えばトップページに自分の指定した固定ページを読み…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP