WordPressで記事を投稿したり、サイトを編集する際に同じリンクがいくつも出たり、同じ文言を何度も使い回すことはありませんか？
広告のマイクロコピーの文言、自身のプロフィール、広告リンク…
複数の記事で同じ内容を修正するのは大変なので、
ショートコードで「元データを変えれば全部書き換わる」仕組みです。
ショートコードを使えば、
ショートコードを設置した場所に内容を反映させることが出来ます。
よく使う文言、季節によって変わるコピーなどが複数設置してある場合
- 修正漏れがなくなる
- 修正の手間が大幅に減る
といったメリットがあります。
当記事ではショートコードを作る２つの方法を紹介しています。
- functions.phpにコードを書き込む
- プラグインを使う
ぜひ一読ください。
＼wordpressについて学べる書籍／
目次
ショートコードとは
WordPressのショートコードとは、短いコードであらかじめ登録した文章やリンク、デザインパーツを呼び出せる仕組みです。
例えば [button] と入力するだけで、毎回書くのが面倒なボタンや広告文をサッと表示できます。
本来ならHTMLやPHPを書く必要がありますが、ショートコードを使えば 記事本文にコードを書く必要がなくなるため、初心者でも扱いやすいのが特徴です。
また、ショートコードは「元の設定を変えれば、貼り付けた全ての場所が一気に更新される」というメリットがあります。
広告リンクやセールの文言、プロフィール文など、複数の記事で使う内容にとても便利です。
「何度も同じ文言を書くのが面倒」「一括で更新したい」というときに役立つ、WordPress の効率化ツールの一つです。
ショートコードの作り方
ショートコードを自作するには
- functions.phpにコードを書き込む
- プラグインを使う
の２種類の方法があります。
functions.phpはコードを書き込むため、少しコーディングに慣れた人、サイト制作をしたことある人向けかもしれません。
コードを書くのが不安な方でも、プラグインなら安心して作れます。
functions.phpに書き込む
コードを書き込み、ショートコードを使えるようにします。
WordPressにログインしたら、以下のように進みます。
外観 → テーマファイルエディター → functions.php
すると、以下の画面になります。
普段触っていない場合、テーマファイルエディターを選んだ時点で警告が出ますので、了解を選択しましょう。
▼今回貼り付けたいコードはこちら ▼
// ▼ リンク一覧を管理する関数
function my_global_links($key) {
$links = array(
'マイクロコピーA' => '＼今ならアマゾンセール開催中！／',
'記事A' => 'https://example.com/linkA',
// 必要に応じて追加
);
return isset($links[$key]) ? $links[$key] : '';
}
// ▼ ショートコード本体
function my_global_link_shortcode($atts, $content = null) {
$a = shortcode_atts( array(
'key' => '',
'text' => '',
'target' => '_self',
), $atts );
$url = my_global_links($a['key']);
if (!$url) return '';
$text = $a['text'] ? $a['text'] : $content;
return '<a href="'.esc_url($url).'" target="'.esc_attr($a['target']).'">'.esc_html($text).'</a>';
}
add_shortcode('glink', 'my_global_link_shortcode');functions.php の最後にそのまま貼り付ければ OK です
使い方はこちらになります。
プラグインを使ってショートコードを作る
プラグインを使ってわかりやすくショートコードを作る方法です。
使うのはShortcoder、ショートコードを簡単に作成できるプラグインです。
例として、今回はマイクロコピーのショートコードを作成します。
▼検索コピー用▼
Shortcoder
最初にプラグインを追加をしましょう。
ダッシュボード左側に、メニューが追加されます
有料化を促してきますが、気にせず「Continue using Shortcoder」(青いボタン)を押します。
ショートコードを作成を選びます。
編集はクラシックエディターですので、ブロックエディタに慣れている方には少しむずかしいかもしれません。
最初にコードエディターをビジュアルエディターに変更します。
コードエディターだと HTML タグを自分で書く必要があるため、ビジュアルエディターに切り替えるのが簡単です。
変更したら、タイトル、表示したい内容を書きます。
短文から、広告コピー500文字、画像などなどWordPressで表示できるものなら大体いけます。
今回は、タイトルに「micro_copy_a」本文に「アマゾンセール開催中！」とします。
ここまでで基本的な設定は終わりです。公開を押して保存しましょう。
ショートコードの使い方
ブロックエディタでの使い方です。ブロックの中にあるので、検索したり探してみましょう。
これはコードで書いたショートコードも、プラグインも共通になります。
functions.phpに書いたショートコードを使う
上記の内容のコードからショートコードを使う場合は以下の内容を書きます。
テキストを反映させたい場合
[ glink key="マイクロコピーA"]とショートコードに入力します。
keyに
$links = array(
'マイクロコピーA' => '＼今ならアマゾンセール開催中！／',
);と入力したときの左側、そして=>で繋いだ先が表示されます。
内容を変えたいときは=>の右側を変更します。
「マイクロコピーA」はテキストを直接入れているので、ショートコードで呼び出すときにtextを入れる必要がありません。
リンクを反映させたい場合
[ glink key="記事A" text="詳しい記事はこちら"]こちらはkeyとtextを指定します。
$links = array(
'記事A' => 'https://example.com/linkA',
);記事Aはリンクを変更するときに使います。
kyeは同じでよいのですが、
リンクを表示するためのテキストを決めるためにtextを指定します。
すると、詳しい記事はこちら←ようなリンクテキストになります。
また、ショートコードを増やしたいときは最初から5~6行目のように
'記事A' => 'https://example.com/linkA',左側の''で呼び出す名前(key)、右側の''で呼び出す内容を変更でき、追加したらショートコードを作成することが出来ます。
// ▼ リンク一覧を管理する関数
function my_global_links($key) {
$links = array(
'マイクロコピーA' => '＼今ならアマゾンセール開催中！／',
'記事A' => 'https://example.com/linkA',
// 必要に応じて追加
);
return isset($links[$key]) ? $links[$key] : '';
}
// ▼ ショートコード本体
function my_global_link_shortcode($atts, $content = null) {
$a = shortcode_atts( array(
'key' => '',
'text' => '',
'target' => '_self',
), $atts );
$url = my_global_links($a['key']);
if (!$url) return '';
$text = $a['text'] ? $a['text'] : $content;
return '<a href="'.esc_url($url).'" target="'.esc_attr($a['target']).'">'.esc_html($text).'</a>';
}
add_shortcode('glink', 'my_global_link_shortcode');プラグインのショートコードを使う
プラグインのショートコードの使い方です。こちらはとてもシンプル。
作成したショートコード一覧より、ショートコードの欄からコピーします。
コピーしたショートコードを貼り付けるだけでテキスト、リンク、画像などの設定した内容が反映されます。
複数の箇所に同じショートコードを貼り付けておいて、ショートコードの内容を変えるだけで全部変わるといったこともできるため、非常に便利です。
まとめ：ワードプレスでショートコードを自作する
ワードプレスでショートコードを自作する方法をまとめました。
ショートコードを使うことで広告の管理や、キャッチコピーの変更、セールのコピーなんかに対応できますね。
「どの記事を直してないんだっけ…」
というミスがなくなるので、とても便利です。
functions.phpに書き込む方法
外観→テーマファイルエディター→functions.phpからコードを書き込む
左右の内容を書き換えたり、追加したりでショートコードを作る
$links = array(
'記事A' => 'https://example.com/linkA',[]で囲み、以下のようにkeyとtextを入れて記事内に記入
[ glink key="記事A" text="詳しい記事はこちら"]*ショートコードとして表示するために頭に半角を入れています
プラグインを使う方法
プラグイン「Shortcoder」を検索、導入
プラグインを新規作成
一覧に表示されるショートコードを記事内に記入
個人的にはプラグインを導入するのをオススメします
最後までご覧いただきありがとうございました。