【イラスト付き】【初心者向け】WordPressのショートコードの使い方を解説！

ブルーちゃん！WordPressで作ったサイトをもっと便利にしたいんだけど、何か良い方法はあるかしら？

ショートコードって聞いたことあるけど、どう使うのかしら？

WordPressのショートコードは、WordPressで使える便利な機能だよ。

短いコードで複雑な処理を簡単に実行できるんだ。

ショートコードを記載しただけで、指定した内容やデザインが表示されるよ。

例えば、定型文やよく使うデザインパーツを呼び出すときに便利なんだ。

記事の中で何度も同じ内容を使うときに特に役立つよ。

もちろんあるよ！作業の時短と効率化が叶えられるんだ。

じゃあ、WordPressのショートコードを使うメリットを一緒に見てみよう！

WordPressのショートコードを使うと、定型文やデザインパーツを簡単に呼び出せるよ。

例えば、お問い合わせフォームやボタンなど何度も使うものをショートコード化しておくと、毎回同じものを手動で入力する必要がなくなるんだ。

デザイン変更も1カ所で済むから管理が楽になるよ。

複数ページで同じデザインパーツを使っている場合でも、1カ所を変更するだけで全体に反映されるんだ。

もちろん、基本的なコードを覚えるだけで、複雑な処理を簡単に実行できるんだ。

PHPファイルで定義されたショートコードを、記事や固定ページに記述するだけだから難しくないよ。

うん、下手するとサイト全体に影響があるかもしれないんだ。

心配しないで！WordPressのショートコードを使うデメリットとその対策も一緒に見てみよう。

記述ミスをすると、サイト全体に影響が出るから要注意だよ。

特に「functions.php」に直接コードを書く場合、間違ったコードの記述でサイト全体が正常に動かなくなることも...。

必ずコード追加前にバックアップを取って、事前にテスト環境で確認することが重要だよ。

ミスを防ぐためには、コードの正確な記述と細心の注意が必要だね。

WordPressのショートコードは初心者でも使えるけど、ある程度の専門知識が必要なんだ。

PHPやHTML、CSSの知識が主に必要で、人によっては少しハードルが高いかもしれないね。

無料学習サイトや入門書を活用し、基本的なプログラミングの知識を学んで、少しずつ理解を深めていくと良いよ。

もちろん、自分で作れるよ！

ここでは、WordPressのショートコード作成方法と使い方を解説するね。

まずは、子テーマの準備から始めるよ。

親テーマのフォルダをコピーして新しいフォルダに貼り付け、そのフォルダ名を「functions.php」として子テーマを新しく作成するよ。

バージョンアップで更新をした際にコードが消えてしまうから、子テーマを準備した方が安心なんだ。

次は、「functions.php」のバックアップを取ろう。

ショートコード作成でPHPファイルを操作するんだけど、記述を間違えてサイトが表示されなくなったときに元に戻せるから損はしないよ。

サーバーのファイルマネージャーからダウンロードして、バックアップを取るのがおすすめだよ。

通常の場合、「/wp-content/themes/テーマ名」のディレクトリに保存されているから確認しておこう。

ついに、子テーマのPHPファイル内にコードを記述するよ。

基本的に「自己完結型ショートコード」「囲み型ショートコード」の2パターンの記述方法があるんだ。

1つ目は、自己完結型ショートコードだよ。

うん。下記のように記事や固定ページに単体で使うと、設定したメッセージ「これはショートコードのサンプルです。」と表示されるんだ。

2つ目は、囲み型ショートコードだよ。

囲み型ショートコードは単体で動かないけど、範囲を指定して使えるんだ。

下記のように記事や固定ページに使うと、指定のテキスト「強調したいテキスト」が赤色で表示されるよ。

最後に、WordPressのショートコードの使い方についてまとめるね。

WordPressのショートコードは使いこなせそうかな？

みんなもWordPressのショートコードを使って、さらに作業を効率化させよう！