初心者でもわかる!WordPressでショートコードを使う方法と使用時の注意点

wordpress ショートコード WordPress

「WordPressでショートコードを作成したい」
「ショートコードを使うメリットやデメリットは?」

WordPressでのショートコード作成にお悩みではありませんか?
WordPressを運用していると、ショートコードを使って複雑な処理を効率化したくなることもありますよね。

そこでこの記事では、初心者でも簡単にWordPressでショートコードを作成する方法について紹介しています。
さらに、ショートコードのメリット・デメリットや注意点なども解説しているので、これからショートコードを使っていく予定の方は、ぜひ参考にしてください。

WordPressのショートコードとは

ショートコードとは、汎用的に使う一連の処理を簡単に呼び出せるようにした短いコードのことです。

「functions.php」というファイルを使うことで、様々な動作を関数として呼び出すことができます。
ビジュアルエディタ・テキストエディタ両方で使え、大括弧で記述するのが一般的です。

例えば、「contact-form-7」は人気の高いプラグインですが、これにも「[contact-form-7 404 "Not Found"]」という形でショートコードが使われています。

WordPressでショートコードを作成するメリット・デメリット

まずは、WordPressでショートコードを作成するメリット・デメリットを見ていきましょう。

メリット

ショートコードのメリットはこちらの2つ。
効率を重視するならショートコードは欠かせませんね。

よく利用する処理をすぐに呼び出せる

汎用的な処理を簡単に呼び出せるため、効率的な記事投稿が可能になります。

例えば、定型文は、「functions.php」に簡単なプログラムを記述すれば簡単に呼び出せるようになります。
「こんにちは今日もいい天気ですね。GoodLuck!」などの文章もショートコードを使えば、「teikei」と書くだけで表示可能です。
定型文が長くなるほど有利になります。

フォーム出力や関連投稿の出力など、WordPressのビジュアルエディタやテキストエディタでは難しいような処理も、ショートコードなら短いコードで簡単に行うことができます。

初心者でも慣れれば簡単に使える

ショートコードの作成は最初こそ戸惑うかもしれませんが、慣れれば誰にでもできます。それほど複雑なプログラムではないため、覚える時のコストよりも覚えた時のメリットの方が大きいのが特徴です。

デメリット

ショートコードを利用することによるデメリットも、しっかり確認しておきましょう。
大きく2つあります。

記述箇所にミスがあるとサイト全体が動かなくなる

「functions.php」はテーマに関わる重要なファイルなので、記述ミスなどがあるとサイトの稼働に不具合を起こす原因になります。
一文字でも異なればエラーになりますので、ショートコードを作成する際は正確なタイピング能力が必要です。

ある程度のWordPressの知識と経験がいる

ショートコードの作成に経験などは必要ありませんが、それでもWordpress・php・htmlなどの基本的な知識は必要です。
知識もなしに作成にあたると、「functions.php」のエラーにつながります。

WordPressでショートコードを作成する方法

ここでは、WordPressでショートコードを作成する方法を紹介します。
ショートコードは手動のほか、プラグインで作成可能です。

どのようなショートコードを書きたいのか考える

まずは、どのような処理をショートコードで呼び出したいかを考えましょう。
「記事タイトルを簡単に取得したい」「記事のパーマリンクを表示したい」「同じデザインのリンクを入れたい」など、それぞれの希望に合ったものを書き出してみてください。

functions.phpに呼び出したい関数を記述する

「functions.php」に呼び出したい関数を記述します。
記述場所に指定はありませんが、分かりやすくするためにファイルの一番下から記載するのがおすすめです。
「functions.php」は以下のディレクトリに保存されています。

・wp-content/themes/使用しているテーマ/functions.php

例えば、定型文を表示させたい場合は、以下のようにするとよいでしょう。
regTxt1()は任意で構いません。

function regTxt1() {
return “こんにちは今日もいい天気ですね。GoodLuck!”;
}

ショートコードを定義する

「add_shortcode(‘ショートコード名’, ‘使用する関数名’)」を使って、ショートコードを定義していきます。
定義することで、wordpressのショートコードとして使えるようになります。
ショートコード名も任意で構いません。

上記の例でいえば、「add_shortcode(‘txt’, ‘regTxt1’)」などです。

WordPressのテンプレートタグを使う

WordPressのテンプレートタグを使って、ショートコードを作成する方法もあります。
例えば、記事タイトルを取得するショートコードは、以下のように作成します。

function titleInfo() {
ob_start();
echo the_title();
return ob_get_clean();
}

「the_title()」は、現在の記事のタイトルを表示してくれるWordPressのテンプレートタグです。
ob_start();と return ob_get_clean();によって、内部処理段階でecho文が動作しないようにしています。

プラグインを使う

「Shortcodes Ultimate」「Post Snippets」「Snippy」などのプラグインを使うと、「functions.php」への記述なしにショートコードを作成できます。
プログラミングに不安があったり、「functions.php」を編集したくないという方にオススメです。

複数のショートコードを使う

「functions.php」にコードを追加していくだけで、複数のショートコードを使うことができます。
それぞれの見分けがつくように、ショートコード名や関数名はわかりやすいものにしましょう。

CSSでカスタマイズもできるため、工夫次第でオリジナリティあふれるショートコードが作れます。

WordPressのショートコードの使い方

作成したショートコードは、ショートコード名をコピペするだけで利用できます。
上記の例でいえば、投稿画面で「txt」と入力すれば、「こんにちは今日もいい天気ですね。GoodLuck!」と表示されるはずです。

WordPressのテンプレートファイルから実行する

テンプレートファイルに「<!–?php echo do_shortcode(‘[ショートコード名]’); ?–>」と記述することで、テンプレートファイルからショートコードを実行することも可能です。

ウィジェットから実行する

「functions.php」に「add_filter(‘widget_text’, ‘do_shortcode’);」を記述してやると、ウィジェットからショートコードを実行することができます。

WordPressで使えるショートコード

ショートコードの関数を記述するにはある程度の知識と経験が必要です。
そのため、ここでは初心者でも使えるショートコードの例を紹介します。

パーマリンクを取得

記事のパーマリンクを取得したい場合は、以下を参考にしてください。
idには、リンクしたい記事のidを入力します。

function articlelink ( $atts ) {
extract( shortcode_atts( array(
‘id’ => ”,
), $atts ) );
return get_permalink( $atts[id] );
}
add_shortcode(‘article’, ‘articlelink’);

パンくずリストを表示する

SEOに効果的と言われるパンくずリストもショートコードで作成できます。

function breadcrumbList() {
//変数breadを作成する
$bread = ”;
// インデックスページかどうかを判定する
if ( !is_home() ) {
// ホームへのリンクを変数に格納する
$bread .= ‘<a href=”‘. home_url( ‘/’ ). ‘”>ホーム</a>’;
// カテゴリーアーカイブか投稿ページが表示されているかを判定
if ( is_category() || is_single() ) {
// 矢印”>”を変数へ入れる
$bread .= ” > “;
// カテゴリを取得して変数へ入れる
$cat = get_the_category();
$bread .= ‘<a href=”‘. get_category_link( $cat[0]->term_id ).'”<‘.$cat[0]->name.'</a<‘;
// 投稿ページが表示されているかを判定
if ( is_single() ) {
// 矢印”>”を変数へ入れる
$bread .= ” > “;
// 投稿タイトルを変数へ入れる
$bread .= get_the_title();

// 固定ページが表示されているかを判定
} elseif ( is_page() ) {
// 矢印”>”を変数へ入れる
$bread .= ” > “;
// 固定ページのタイトルを変数へ入れる
$bread .= get_the_title();

return $bread;
}
add_shortcode(‘breadcrumb’, ‘breadcrumbList’);

WordPressでショートコードを作成する時の注意点

ここでは、WordPressでショートコードを作成する際の注意点を紹介します。

functions.phpのバックアップをとる

「functions.php」内に記述ミスがあると、サイトが正常に稼働しなくなるので、編集する前は必ずバックアップを取りましょう。
FTPソフトなどを使って、「functions.php」ファイルを丸ごとインストールしてください。

サイトが稼働しなくなると、WordPressの管理画面にもログインできなくなります。
特にセミコロンや空白行などのミスは、頻繁に起こりやすくかつ分かりづらいため注意しましょう。
「functions.php」は各テーマファイル内に保存されています。

子テーマのfunctions.phpを使う

親テーマの「functions.php」はアップデートですべてリセットされるため、子テーマの「functions.php」を使うのがおすすめです。
子テーマを使うことで、親テーマのアップデート後も既存の「functions.php」を保持できるようになります。
HTMLやCSSなども一緒に保存できるため、カスタマイズファイルのバックアップに有効です。

いつ見ても変更の内容が分かるように工夫する

ショートコードを作成するときは、コメント機能を使って変更内容が分かるようにしておきましょう。
コメントは「//」の後に記述します。

プログラムコードは、1週間・2週間と経つうちに、内容が曖昧になりがちです。
特にショートコードを追加するときは、それぞれの内容を記載しておかなければ、複数のコードが入り乱れることになるので注意しましょう。

コメントをしっかり記載しておけば、「functions.php」に不具合が起きた時はもちろん、変更箇所を確認する時にも役立ちます。

まとめ

WordPressのショートコードは、汎用的な処理を簡略化できる便利な機能です。
定型文や汎用ボタンなどに利用することで、記事作成のスピードを向上させることが可能です。

作成する方法は「functions.php」に関数を記載して、add_shortcodeで定義するだけです。
「Shortcodes Ultimate」「Post Snippets」「Snippy」などのプラグインを利用すれば、「functions.php」を編集する必要もありません。

ショートコードを作成する時は、「functions.php」のバックアップを忘れずに取っておきましょう。
工夫次第で色々なことができるので、自分に合ったやり方でアレンジしてみてください。

コメント