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

    WordPressでタグ一覧ページの作り方

    WordPressでタグ一覧ページを作るやり方をご紹介します。サイトで…

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

    WordPress

    WordPressで記事タイトルの文字数制限をするやり方

    WordPressで記事タイトルの文字数制限をするやり方をメモしときま…

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

    WordPress

    WordPressでパンくずリストをプラグインなしで設置する簡単なやり方

    WordPressでパンくずリストをWebサイトに設置したいといった時…

  4. WordPress

    WordPressでカスタムフィールドを使って任意のコードやファイルをhead内に読み込ませる

    以前「WordPressで特定の記事やページにカスタムフィールドで指定…

  5. WordPressアップデートでアイコンが表示されない時の対処方法

    WordPress

    WordPress 3.8のアップデートで管理画面のアイコン画像が上手く表示されない時の対処方法

    先程、WordPress 3.8にアップデートしたら管理画面の上部バー…

  6. WordPress

    Google XML SitemapsプラグインでWordPressにサイトマップ作成

    WordPressにはロボット向けのXMLサイトマップを自動生成してく…

コメント

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

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

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP