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のログイン時のツールバー

    WordPress

    ブログなどでFlickrの転載可能な画像を使用する時のクレジット表示するためのWordPressショ…

    ブログなどでコンテンツに関連した画像を挿入したいといったことがあるかと…

  2. ベストなWordPressテーマ集

    WordPress

    無料&有料のベストなWordPressテーマ集(2014年8月)

    ベストなWordPressテーマ集(無料&有料、2014年8月)「Be…

  3. WordPress

    WordPressのシングルページで前後の記事リンクを条件判定で出力するやり方

    以前 WordPressのシングルページで前後の投稿やページ分割のリン…

  4. WordPress

    MAMP(インストール済)でWordPressをローカル環境で動かすまでの簡単な手順

    久しぶりにMAMPを使って新しいWordPressのローカル環境を作っ…

  5. WordPress

    ブログの編集作業が捗るWordPressプラグイン「AddQuicktag」

    すごく便利なプラグイン「AddQuicktag」を使ってみました。なん…

  6. WordPress

    WordPressで「この記事の所要時間」という読了時間を表示させてくれるプラグイン「estimat…

    とても便利なWordPressのプラグインを発見したので備忘録です。よ…

コメント

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

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

最近の記事

  1. ゴムの耳栓
  2. ライオンコーヒー(バニラマカダミア)
PAGE TOP