WordPress でショートコードを使用するための 7 つの重要なヒント

経験豊富なWordPressユーザーであっても、完全な初心者であっても、ショートコードを使用することで、コーディングの知識なしにサイトをカスタマイズする新しい方法を解き放つことができます。

短コードを使用すると、コードを実際に記述することなく、投稿、ページ、ウィジェットにさまざまな機能を追加できます。多くのWordPressプラグインやテーマも、価格表やイベントカレンダーなどのさまざまな要素を追加するために短コードを使用しています。

WPBeginnerでは、クライアントのためにWordPressサイトを構築したり、読者のためにテストしたりする際に、ショートコードとショートコードプラグインを一貫して使用してきました。その過程で、ショートコードの使用をより簡単かつ効果的にする方法をいくつか学びました。

この記事では、WordPress でショートコードを使用するための重要なヒントをいくつかご紹介します。

WordPress のショートコードとは何ですか？

WordPress では、ショートコードは角括弧で囲まれた短いコード片であり、投稿、ページ、またはウィジェットに動的なコンテンツや機能を追加できます。

例を挙げます。

[example_shortcode]

WordPress ウェブサイトにコンテンツを追加すると、投稿、ページ、コメントに有害なコードが入り込まないように、自動的にセキュリティチェックとフィルターが実行されます。これは、これらの領域に直接コードを記述できないことを意味します。

ただし、これらのセクションに特定のコードを追加する必要がある場合があります。ショートコードは、そのための方法を提供します。

これらは、簡単な方法で、美しいレスポンシブスライダー、お問い合わせフォーム、画像ギャラリー、埋め込みビデオなどの高度な機能を追加するためのショートカットとして機能します。

例えば、複雑なHTMLまたはJavaScriptスニペットを手動で埋め込む代わりに、ショートコードを使用して、1行のテキストで同じ結果を得ることができます。これにより、ショートコードは初心者にも専門家にも非常に役立ちます。

ただし、ショートコードは使いやすいですが、それらを簡単に追加および管理する方法を知っていると、時間を節約し、ワークフローを改善し、問題を回避できます。

とはいえ、WordPressでショートコードを使用するためのヒントをいくつか見ていきましょう。以下のリンクをクリックすると、任意のヒントにジャンプできます。

• ショートコードを使用しない方が良い場合を知る
• ショートコードを将来にわたって有効にする
• WordPress テーマでショートコードを検索する方法
• ウィジェットでのショートコードの使用
• ヒント5：テーマファイルにショートコードを追加する
• ヒント 6: 壊れたショートコードを非表示にする
• ヒント 7: 投稿で使用されているショートコードを見つける
• ボーナス: 避けるべき一般的なショートコードの誤り

ヒント1：ショートコードを使用しない時期を知る

ショートコードは非常に便利ですが、すべての投稿やページでショートコードに頼るのが常に最善とは限りません。多くの WordPress テーマには 200 を超えるショートコードがあると主張されていますが、それらを使いすぎると長期的には問題が発生する可能性があります。

例えば、テーマのショートコードを使用して投稿にCTA（コールトゥアクション）ボタンを作成すると、そのテーマに縛られることになります。テーマを切り替えると、これらのショートコードが機能しなくなり、壊れたり読めないコンテンツが残る可能性があります。

CTAボタンを投稿に追加する方法を探している場合は、ショートコードを使用せずにWordPressにCSSボタンを追加する方法に関するガイドを読むべきです。ショートコードを使用せずにWordPressにCSSボタンを追加する方法

コードなしで行動喚起ボタンを作成するために、組み込みの WordPress ボタンブロックを使用することもできます。

同様に、バナー広告や投稿の末尾の署名テキストのような繰り返し要素にショートコードを使用している場合は、別の方法を検討することをお勧めします。WordPressプラグインを使用するか、開発者と協力してこれらの要素をブログに追加できます。

この方法により、一貫したスタイリングが保証され、将来的に要素を更新または削除することが容易になります。

最後に、投稿全体に散らばったショートコードは、使用を中止することにした場合に削除するのが面倒になる可能性があることを覚えておいてください。すべての投稿を手動で編集するのは時間がかかります。

そのため、短コードをどのように、どこで使用するかには注意が必要です。必要不可欠な場所にのみ追加するようにしてください。使いすぎると、後でより大きな問題が発生する可能性があります。

ヒント2：ショートコードを将来性のあるものにする

ショートコードは便利ですが、テーマが提供している場合、それらを過度に使用する前に再考した方が良いかもしれません。

これは、テーマを切り替えた場合に、新しいテーマが同じショートコードをサポートせず、コンテンツが壊れる可能性があるためです。

この問題を回避するために、サイト固有のプラグインに移行することができます。これにより、ショートコードは独立したままになり、どのテーマを使用しても引き続き機能します。

これを行うには、テーマのfunctions.phpファイルでショートコードスニペットを見つけてコピーするだけです。次に、サイト固有のプラグインに貼り付けて、機能し続けるようにします。

ただし、functions.php ファイルを直接編集するのは理想的ではありません。なぜなら、小さなエラーでもサイト全体がクラッシュする可能性があるからです。

ここで WPCode が役立ちます。私たちの意見では、テーマにショートコードスニペットを追加する最も簡単な方法を提供しています。

数回のクリックでカスタムコードを追加でき、コードスニペットのエラーもハイライト表示されます。

このプラグインは当社のウェブサイトで徹底的にテストされており、初心者にも非常に使いやすいことがわかりました。詳細については、当社のWPCodeレビューをご覧ください。

さらに、誤って間違ったコードを追加してもウェブサイトがクラッシュしないため、誰にとっても信頼できるオプションとなります。

詳細については、WordPressにカスタムコードを追加する方法に関するガイドをご覧ください。WordPressにカスタムコードを追加する方法。

ヒント3：WordPressテーマでショートコードを検索する方法

短コードが機能し続けるようにするには、短コードがどのように見えるか、そしてテーマ内でそれらをどのように見つけるかを知ることが重要です。

まず、テーマのフォルダを開く必要があります。通常、これは/wp-content/themes/your-theme-name/にあります。

functions.php ファイル内、またはテーマに「includes」フォルダがある場合はその中を探してください。

ファイルを見つけたら、それを開き、「add_shortcode」という用語を検索してください。これにより、WordPressテーマで現在使用されているすべてのショートコードを見つけることができます。

ショートコードスニペットの例を次に示します。

function my_shortcode_function() { 
$i = '<p>Hello World!</p>';
return $i;
} 
add_shortcode('my-shortcode', 'my_shortcode_function');

このコードは、「my-shortcode」というショートコードを作成します。これは簡単なテキストの挨拶を返し、次のようにWordPressの投稿やページに埋め込むことができます。

[my-shortcode]

詳細については、WordPressでショートコードを追加する方法をご覧ください。

ヒント4：ウィジェットでのショートコードの使用

多くのユーザーはショートコードは投稿やページ専用だと思っていますが、そうではありません。

WordPressウィジェット内でも使用できます。これにより、サイドバー、フッター、その他のウィジェット対応エリアに動的なコンテンツを追加する際の柔軟性がさらに高まります。

これを行うには、WordPressダッシュボードから 外観 » ウィジェット ページにアクセスし、「ブロックを追加」（+）ボタンをクリックします。これによりブロックメニューが開きます。そこから「ショートコード」ブロックを追加する必要があります。

これを行うには、テーマの正しいエディターに移動する必要があります。クラシックテーマを使用している場合は、WordPressダッシュボードから外観 » ウィジェットに移動します。ブロックテーマを使用している場合は、代わりに外観 » エディターに移動します。

正しいエディターに入ったら、「ブロックを追加」(+) ボタンをクリックしてブロックメニューを開きます。そこから、「ショートコード」ブロックをサイドバーまたはその他のウィジェットエリアに検索して追加します。

上記の方法は、Hestiaのようなクラシックテーマを使用している場合にのみ機能することに注意してください。

ただし、ブロックテーマを使用している場合、フルサイトエディターを使用してショートコードをウィジェットエリアに追加できます。

詳細については、WordPressのサイドバーウィジェットでショートコードを使用する方法をご覧ください。

ヒント5：テーマファイルにショートコードを追加する

投稿、ページ、またはウィジェットの外部にショートコードを追加する必要がありますか？

カスタムテーマファイルやテーマの特定のセクションにショートコードを追加したい場合は、テーマのコードに直接ショートコードを追加することで簡単に行えます。

例えば、カスタムページテンプレートを作成し、ショートコードを使用してレスポンシブスライダーを含めたいとします。

コンテンツエリアにショートコードを手動で挿入する代わりに、テーマに直接出力できます。次のようにショートコードを追加するだけです：

<?php echo do_shortcode("[example_shortcode]"); ?>

この手法は、カスタムページ、ヘッダー、フッター、または通常のコンテンツエディターに紐付いていないテーマの他の部分のような領域にショートコードを埋め込みたい場合に役立ちます。

ヘルプが必要な場合は、WordPressにWebからスニペットを貼り付けるための初心者ガイドをご覧ください。

ヒント 6: 壊れたショートコードを非表示にする

テーマを変更した際に、古いショートコードが機能しなくなることに気づかないユーザーがよくいます。時には、ユーザーが古い投稿を訪問した際に奇妙なテキストが表示されることに数ヶ月後に気づくこともあります。

さて、それを修正するには2つの方法があります。壊れたショートコードをすべての投稿から手動で削除するか、非表示にするかのどちらかです。非表示にすることをお勧めします。なぜなら、より迅速な修正だからです。

これを行うには、WPCodeプラグインをインストールして有効化する必要があります。有効化したら、コードスニペット » + スニペットを追加ページにアクセスし、「新しいカスタムコードを追加（新規スニペット）」オプションを選択します。

これにより、「カスタムスニペットの作成」ページに移動します。ここで、ドロップダウンメニューから「PHPスニペット」オプションを選択する必要があります。

次に、以下のコードを「コードプレビュー」ボックスに追加し、「非アクティブ」スイッチを「アクティブ」に切り替えます。

add_shortcode( 'shortcodetag', '__return_false' );

shortcodetag をショートコード名に置き換えるのを忘れないでください。最後に、「スニペットを保存」ボタンをクリックして設定を保存します。

このコードは、出力のない孤立したショートコードを元に戻します。

ヒント 7: 投稿で使用されているショートコードを見つける

ヒント 6 のハックを使用したくない場合、またはすべてのショートコードを手動で削除したい場合は、最初のステップは、そのショートコードを使用しているすべての投稿を見つけることです。

これを行うには、テーマのfunctions.phpファイルに次のコードを追加するか、WPCodeを使用してください。

function wpb_find_shortcode($atts, $content=null) {
ob_start();
extract( shortcode_atts( array(
		'find' => '',
	), $atts ) );

$string = $atts['find'];

$args = array(
	's' => $string,
	);

$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) {
        echo '<ul>';
	while ( $the_query->have_posts() ) {
	$the_query->the_post(); ?>
	<li><a href="<?php  the_permalink() ?>"><?php the_title(); ?></a></li>
	<?php
	}
        echo '</ul>';
} else {
        echo "Sorry no posts found";
}

wp_reset_postdata();
return ob_get_clean();
}
add_shortcode('shortcodefinder', 'wpb_find_shortcode');

このコードは、shortcodefinder という名前のショートコードを単純に作成します。WordPressクエリを実行し、指定されたショートコードタグを持つ投稿を一覧表示します。

例えば、ショートコード [contact-form] を含むすべての投稿を見つけたい場合、WordPressのページに [shortcodefinder find=’contact-form’] と入力して保存するだけです。これで、ページをプレビューすると、そのショートコードを含むすべての投稿が表示されます。

詳細な手順については、WordPress の未使用ショートコードを見つけて非表示にする方法に関するガイドをご覧ください。

ボーナス: 避けるべき一般的なショートコードの誤り

ショートコードは多くのサイトで便利で不可欠ですが、ユーザーはショートコードを扱う際にいくつかの一般的な間違いを犯すことがあります。

これらのエラーは、機能の破損、コードの乱雑化、またはサイトのパフォーマンス低下につながる可能性があります。注意すべき5つの主な間違いと、それらを回避する方法を以下に示します。

• 短コードを使いすぎたページ：1つのページに多くの短コードを使用すると、読み込み時間が遅くなり、デザインが乱雑になる可能性があります。そのため、短コードの使用は不可欠な要素に限定することをお勧めします。
• ショートコードのネストを誤る：ネストされたショートコード（1つのショートコードを別のショートコード内に入れること）はトリッキーであり、1つのショートコードが機能しない、またはページに誤ったコンテンツが表示されるなどの問題を引き起こす可能性があります。ショートコードをネストする必要がある場合は、まずテストして期待どおりに表示されることを確認してください。
• 短コードを適切に閉じ忘れる：ユーザーが短コードを閉じるのを忘れることがあり、投稿やページのレイアウトが崩れる可能性があります。そのため、短コードは常に正しく開き、ブラケットで閉じられていることを確認する必要があります。単一使用の短コードの場合は、余分なスペースや記号を残さないようにしてください。
• サポートされていない領域でのショートコードの使用： WordPress の特定の領域では、デフォルトでショートコードがサポートされていない場合があります。そこにショートコードを使用しようとすると、コンテンツが壊れたり表示されなくなったりする可能性があります。ウィジェットやカスタムフィールドにショートコードを挿入する前に、その領域がショートコードをサポートしているかどうかを確認してください。サポートされていない領域でショートコードを有効にするためにプラグインを使用できることがよくあります。
• ショートコードをモバイルデバイスでテストしないこと: 多くのユーザーは、ショートコードで作成した要素がモバイルデバイスでどのように表示されるかを確認するのを忘れています。デスクトップで素晴らしく見えるものが、モバイル画面では壊れたり、見栄えが悪くなったりする可能性があります。ショートコードの出力がレスポンシブであることを確認するために、常にさまざまなデバイスでページや投稿をプレビューしてください。

これらの一般的な間違いを避け、これらのヒントに従うことで、WordPressサイトで短コードを使用する際に、よりスムーズな体験を得ることができます。

これらのヒントが、ショートコードの使用方法を学び、WordPressで最大限に活用するのに役立ったことを願っています。また、フォーマットの問題なくWordPressにコピー＆ペーストする方法に関する初心者向けガイドや、WordPressコンテンツエディターをマスターするためのヒントに関する専門家向けヒントも参照してください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。