AddQuicktagとショートコードでWordPressの投稿を楽にする

こんにちは、面倒くさがりやの金田です。
同じ作業を繰り返すときなど、もっと早く・簡単・楽にできないかなって常に思います。
よく言えば「もっとよくしよう」という改善志向の性格です。

そこで、今回はWordPressで投稿するときに便利な方法について3つほどご紹介させていただきます。

単語登録

WordPressに限った話ではありませんが、単語登録は非常に便利です。

人生で最初に私が登録した単語は「金田」(かねつき)です。変換しても出てこないからです。
よく使う人名や地名などを単語登録してらっしゃる方は多いのではないでしょうか?

私が登録している単語の例をご紹介しておきますと

  • メールアドレス(パソコン、携帯)
  • 住所
  • EXCELやワードプレスの関数
  • 各種コメントタグ
  • 挨拶などの定型文
  • その他よく使うコードなどです。

ポイントは、短く・わかりやすいワードで長いキーワードを登録するということでしょうか。

登録方法

Windowsの場合は、日本語入力がONになっている時に「Ctrl」+「F10」で単語登録のメニューを表示することができます。

Windows単語登録

登録したい「単語」と「よみ」を入力し、「品詞」を選択、「登録」して完了です。

単語登録の画面

何度も入力するなぁとか、ちょっと長くて入力が面倒だなと思った時にさくっと登録しておくと楽になります!

AddQuicktag

WordPressのプラグインを利用するとタグの入力が楽になります!

開始タグと終了タグをあらかじめ登録しておけば、ビジュアルエディタやテキストエディタで簡単に呼び出して使うことができます。
class名などの属性値も併せて登録しておくとさらに便利です。

インストール

WordPressログイン後の管理画面に行き、メニューより「プラグイン」→「新規追加」を選択します。

プラグインの検索窓に「AddQuicktag」と入力し検索し、インストール、有効化します。

設定方法

管理画面のメニュより「設定」→「AddQuicktag」を選択します。

AddQuicktagの設定

設定画面で必要事項を入力します。

Button Label→「ボタンの名前(必須)」(例:コード)

Start Tag→「開始タグ(必須)」(例:<pre class=”prettyprint”><code>)

終了タグ→「終了タグ(あれば)」(例:</code></pre>)

チェックマークにチェックを付けて、最後に画面下部にある「設定を保存」をクリックします。

使い方

ビジュアルエディタの場合は、囲みたい部分(テキスト)を選択し、ツールの中にある「AddQuicktag」の選択プルダウンより適用したいものを選択します。

AddQuicktagの利用

ソースコードを確認すると必要なタグが前後に入っています。

<pre class="prettyprint"><code>ここが内容</code></pre>

 

ショートコード

続いては、ショートコードという機能のご紹介です。これは、ちょっと導入難易度が高いです。

ショートコードとは、WordPressの「functions.php」に登録したコードを呼び出して利用できる機能です。

ちょっとしたコードを入力したり、タグを囲んだりするのであれば、先ほどご紹介した単語登録やAddQuicktagで十分ですが、ちょっと複雑なコードであればこのショートコードという機能を使うと便利です。

今回は、サイトのスクリーンショット付のリンクのHTMLコードを生成するショートコードを作成してみました。
(class名、CSSは別途設定が必要です。)

<p class="cf"><a href="http://www.yahoo.co.jp/" target="_blank" rel="nofollow"><img class="pull-left mr10 hover" src="http://capture.heartrails.com/150x80?http://www.yahoo.co.jp/" alt="http://www.yahoo.co.jp/" title="'.$url.'" />Yahoo!Japan</a></p>

表示イメージはこちら

http://www.yahoo.co.jp/Yahoo!Japan

 

ショートコードの利用

投稿する際に[]で囲って本文内に記述して使います。

[link url=http://www.yahoo.co.jp/ title=Yahoo!Japan]

「link」がショートコードの名前
「ulr」でリンク先のurlを指定しています
「title」でリンク先の名前を指定しています

テンプレートで使用するときは下記の用に記述します。

<?php echo do_shortcode('[link url=http://www.yahoo.co.jp/ title=Yahoo!Japan]'); ?>

ショートコードの実装の仕方です。

「functions.php」にコードを追加します。

// サイトサムネイル付の外部リンク
function linkFunc($arg) {
  extract ( shortcode_atts ( array (
         'url' => 'URLがありません',
         'title' => 'タイトルがありません',
     ), $arg ) );
  return '<p class="cf"><a href="'.$url.'" target="_blank"><img class="pull-left mr10 hover" src="http://capture.heartrails.com/150x80?'.$url.'" alt="'.$url.'" title="'.$url.'" />'.$title.'</a></p>';
}
add_shortcode('link', 'linkFunc');

ショートコードの名前「link」、ショートコードの関数名「linkFunc」とし、urlにリンク先のURL、titleにリンク先の名前をセットしていますので、そのurlの値をを<a>タグのhrefの値、<img>タグのaltの値、titleの値、titleの値ををリンクの名前として受け取って代入する処理です。

このショートコードをもっと単純化したものが以下の例です。
同じテキストを呼び出して使いたいときや、いろいろな箇所に挿入したいときは大変便利です。

functions.phpの記述

function ショートコードの関数名($atts) {
    extract(shortcode_atts(array(
        'テキスト1' => 'テキスト1の値がなかった場合に表示される内容',
        'テキスト2' => 'テキスト1の値がなかった場合に表示される内容'
    ), $atts));
    return $テキスト1 . $テキスト2;
}
add_shortcode('ショートコードの名前', 'ショートコードの関数名');

ショートコードの利用

[ショートコードの名前 テキスト1=あいう テキスト2=かきく]

 ショートコードをもっと勉強するには

こちらのサイトを参考にさせていただきました。

http://www.webopixel.net/wordpress/53.htmlWordPressのショートコードを自作してみる(WEBOPIXEL)

http://www.awawaweb.com/201202/wordpress-shortcode.htmlWordPressショートコードの書き方いろいろ(あわわうぇb)

まとめ

  • ちょっとしたコードの登録には「単語登録」
  • タグで囲みたいときは「AddQuicktag」
  • 同じ値を何度も利用したり、任意の場所に挿入したり複雑な処理「ショートコード」

利用頻度やシーンに合わせて使い分けてみて下さい。

コメントを残す

メールアドレスが公開されることはありません。