wordpress

更新日: 2024/6/27

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

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

それなら、ショートコードを使ってみたらどうかな。

特定の機能やデザインを簡単に追加できるよ。

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

今回は、WordPressのショートコードの使い方について解説するね！

1. WordPressのショートコードとは？
2. WordPressでショートコードを使うメリットは？
2-1. 1.定型文やデザインパーツの呼び出しが簡単
2-2. 2.初心者でも使いやすい
3. WordPressのショートコードを使うデメリットは？
3-1. 1.記述ミスでサイト全体に影響が出る
3-2. 2.ある程度の専門知識が必要
4. WordPressのショートコード作成方法と使い方
4-1. 1.子テーマを準備する
4-2. 2.「functions.php」のバックアップを取る
4-3. 3.子テーマのPHPファイル内にコードを記述する
5. まとめ

WordPressのショートコードとは？

そもそもWordPressのショートコードって何だったかしら？

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

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

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

短いコードでいろんなことができるのね！具体的にはどんな場面で使えるの？

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

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

SEOを無料で相談するならこちら！

WordPressでショートコードを使うメリットは？

WordPressのショートコードを使うメリットってあるかしら？

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

そうなの？ちょっとどんな感じか気になるわ。

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

WordPressのショートコードを使うメリット

1.定型文やデザインパーツの呼び出しが簡単

2.初心者でも使いやすい

1.定型文やデザインパーツの呼び出しが簡単

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

定型文やデザインパーツを呼び出すってどうやって？

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

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

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

それは確かに便利ね。統一感も出せるし、作業も効率化できるわ。

2.初心者でも使いやすい

ショートコードって、初心者でも簡単に使えるの？

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

それは心強いわね。どうすれば使えるのかしら？

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

SEOを無料で相談するならこちら！

WordPressのショートコードを使うデメリットは？

WordPressのショートコードにはデメリットもあるのかしら？

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

それは怖いわね。前もって知っておきたいわ。

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

WordPressのショートコードを使うデメリット

1.記述ミスでサイト全体に影響が出る

2.ある程度の専門知識が必要

1.記述ミスでサイト全体に影響が出る

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

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

どうすれば防げるのかしら？

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

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

2.ある程度の専門知識が必要

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

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

そうなのね、専門知識を身につけるにはどうしたら良いかしら？

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

そうね、まずは実際に手を動かしてコードを書いてみるわ。

SEOを無料で相談するならこちら！

WordPressのショートコード作成方法と使い方

ショートコードが便利なのは分かったけど、作り方が分からないわ。

これって自分で作れるものなのかしら？

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

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

WordPressのショートコード作成方法と使い方

1.子テーマを準備する

2.「functions.php」のバックアップを取る

3.子テーマのPHPファイル内にコードを記述する

1.子テーマを準備する

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

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

子テーマでなく、親テーマを直接編集するのはダメなのかしら？

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

それは危険ね。親テーマではなく子テーマを編集するように気をつけるわ。

2.「functions.php」のバックアップを取る

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

「functions.php」のバックアップって絶対必要なの？

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

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

ちなみに、「functions.php」はどこに保存されているの？

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

3.子テーマのPHPファイル内にコードを記述する

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

どんな感じで記述したら良いのかしら？

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

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

PHPファイル内に記述（自己完結型ショートコード）

function my_shortcode() {
return 'これはショートコードのサンプルです。';
}
add_shortcode('sample', 'my_shortcode');

上記のコードをPHPファイル内に記述するだけで、ショートコードが使えるの？

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

自己完結型ショートコード

[sample]

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

PHPファイル内に記述（囲み型ショートコード）

function highlight_shortcode($atts, $content = null) {
return '<span style="red">' . $content . '</span>';
}
add_shortcode('highlight', 'highlight_shortcode');

これは、自己完結型ショートコードとはどう違うのかしら？

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

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

囲み型ショートコード

[highlight]強調したいテキスト[/highlight]

SEOを無料で相談するならこちら！

まとめ

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

まとめ

◆WordPressのショートコードを使うと、定型文やデザインパーツを簡単に呼び出すことができ、作業効率が上がる

◆記述ミスでサイト全体に影響が出るため、元に戻せるよう事前にバックアップを取得しておくことが重要

◆ショートコードには、単体で使える「自己完結型ショートコード」と、範囲を指定できる「囲み型ショートコード」がある

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

詳しく教えてもらったからできそうよ。

早速試してみるわ。ブルーちゃん、ありがとう！

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

ブルー

SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。

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

WordPressのショートコードとは？

WordPressでショートコードを使うメリットは？

1.定型文やデザインパーツの呼び出しが簡単

2.初心者でも使いやすい

WordPressのショートコードを使うデメリットは？

1.記述ミスでサイト全体に影響が出る

2.ある程度の専門知識が必要

WordPressのショートコード作成方法と使い方

1.子テーマを準備する

2.「functions.php」のバックアップを取る

3.子テーマのPHPファイル内にコードを記述する

まとめ

最新の記事一覧

最新の記事一覧