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の使い方に関しては以前記事にしていますのでよろしければそちらもどうぞ。

参考サイト

MacのCyberduckで.htaccessファイルなどの非表示ファイルを表示させるやり方前のページ

ボックス要素からはみ出した分のテキストを「…」に置き換えてくれるjQueryプラグイン「jQuery.dotdotdot」次のページ

関連記事

  1. WordPressで投稿IDを指定した記事をランダム表示

    WordPress

    WordPressで複数の投稿ID(記事ID)を指定した記事をランダムで表示させるやり方

    個人的にやってみたかったので備忘録。WordPressで自分が作った関…

  2. Broken Link Checker

    WordPress

    リンク切れをチェックできるWordPressプラグイン「Broken Link Checker」

    そういえば自分のサイトでリンク切れのチェックをしたことがなかったので、…

  3. WordPress

    WordPressプラグイン「WPtap Mobile Detector」を使えばスマートフォン専用…

    WordPressでスマートフォン専用のテーマを作成した場合、iPho…

  4. WordPress

    WordPressでオリジナルテーマを作成する時などにチェックしてくれるプラグイン「Theme-Ch…

    このプラグインはすごいですね。自作のテーマを作成した時なんかにこれを使…

  5. WordPressでパンくずリストを設置

    WordPress

    WordPressの自動バックグラウンド更新(アップグレード)の設定について

    先日、WordPressのアップグレードがあったので後でやろう思ってい…

  6. WordPress

    記事コピー防止策になるかもしれないWordPressプラグイン「RSS Footer」

    RSS FooterというWordPressのプラグインなんですが、こ…

コメント

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

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

最近の記事

  1. あらびきソーセージパイ
  2. REACH フロス
  3. MacBook AirとApple Watch
  4. エアリズムコットンタンクトップ
PAGE TOP