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でカスタムフィールドを使って任意のコードやファイルをhead内に読み込ませる

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

  2. WordPress

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

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

  3. WordPress

    WordPressで人用のサイトマップを作ってくれるプラグイン「PS Auto Sitemap」の使…

    WordPressで人に見せるための人用サイトマップを簡単に作成してく…

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

    WordPress

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

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

  5. WordPress

    WordPressの公式ロゴマークは公式サイトでダウンロードすることができる

    何気なくWordPress公式サイトを見ていたら、WordPressの…

  6. WordPress

    WordPressのheader.php内でよく使いそうな関数などをまとめてみた

    WordPressで自作のテーマを作成する時にheader.phpでよ…

コメント

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

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

最近の記事

  1. α7C + FE28-60mm F4-5.6
  2. Apple Watch Series 6
  3. iPad Air
  4. 宇治抹茶ケーキとカフェアメリカーノ

アーカイブ

PAGE TOP