私たちの経験では、WordPressで学ぶべき基本的なことの1つは、サイドバーウィジェットでショートコードを使用する方法です。
これは、多くのプラグインが独自のウィジェットではなく、コンテンツを表示するためにショートコードを使用しているためです。サイドバーでショートコードを使用する方法を知っていると、サイトでより多くのことができるようになり、さまざまなプラグインを最大限に活用できます。
この記事では、WordPressのサイドバーウィジェットでショートコードを使用する方法を説明します。クラシックテーマとブロックテーマの両方の方法をカバーします。
WordPressサイドバーウィジェットでショートコードを使用する理由
ショートコードを使用すると、お問い合わせフォーム、テーブル、トップコメンターなど、高度なコンテンツや機能をウェブサイトに追加できます。WordPressにはいくつかの組み込みショートコードがありますが、一部のプラグインは独自のショートコードを追加します。
例えば、WordPressサイドバーにInstagram写真を、Smash Balloon Instagram Feedが提供するショートコードを使用して表示できます。
このコンテンツはWordPressウェブサイト全体に表示されるため、各ページや投稿に手動で追加する必要はありません。これにより、多大な時間と労力を節約でき、サイトのデザインの一貫性を保つのに役立ちます。
それを踏まえて、WordPressのサイドバーウィジェットにショートコードを追加して使用するいくつかの異なる方法を見てみましょう。使用したい方法に直接ジャンプするには、以下のクイックリンクを使用してください。
- 方法1：WordPressブロックウィジェットエディターにショートコードを追加する（クラシックテーマ）
- 方法2. フルサイトエディター（ブロックテーマ）にショートコードを追加する
- Method 3: Using the Custom HTML Widget (More Customizable)
方法1：WordPressブロックウィジェットエディターにショートコードを追加する（クラシックテーマ）
ほとんどの無料および有料のクラシックWordPressテーマには、ウィジェット対応のサイドバーが付属しています。それを踏まえて、多くの場合、単にショートコードウィジェットをウェブサイトのサイドバーに追加できます。
まず、ダッシュボードで外観 » ウィジェットに移動します。ここでは、サイドバーを含む、WordPressでウィジェットを追加できるすべての異なる領域が表示されます。
「+ ブロックを追加」ボタンをクリックして、「ショートコード」と入力し始めてください。
右側のブロックが表示されたら、WordPressのサイドバーにドラッグします。
これで、ショートコードを追加できるようになりました。
完了したら、「更新」をクリックして変更をライブにすることを忘れないでください。
これで、WordPressブログまたはウェブサイトにアクセスして、ショートコードが機能していることを確認できます。
方法2. フルサイトエディター（ブロックテーマ）にショートコードを追加する
ブロックテーマを使用している場合は、フルサイトエディターを使用してサイドバーにショートコードを追加できます。WordPress ダッシュボードで、テーマ » エディターに移動します。
ブロックテーマを編集するための設定が表示されます。
テーマのサイドバーを編集するには、通常「パターン」メニューをクリックする必要があります。
次に、「テンプレートパーツ」までスクロールします。
ここには、ヘッダー、フッター、サイドバーなどのブロックテーマのデフォルトのテンプレートパーツがあります。クラシックテーマでは、通常、これらの要素はウィジェットエリアとして分類されます。
クラシックテーマと同様に、ブロックテーマにはサイドバーテンプレートパーツがある場合とない場合があります。その場合、自分で作成する必要があるかもしれません。作成方法については、WordPressのフルサイト編集に関する初心者ガイドをお読みください。
サイドバーを見つけたら、それをクリックするだけです。
次に、鉛筆の「編集」ボタンをクリックするだけです。
これにより、サイドバーを編集するためのブロックエディターが表示されます。
これで、ブロックエディターを使用するのと同じように、どこでも「+ブロックを追加」ボタンをクリックできます。
その後、「ショートコード」ブロックを選択します。
完了したら、通常どおりショートコードを追加するだけです。
次に、「保存」をクリックして変更を確定します。
プロのヒント: 最近クラシックテーマからブロックテーマに切り替えたばかりで、古いサイドバーウィジェットをブロックとして使用したい場合は、WordPressウィジェットをブロックに変換する方法に関するガイドをお読みください。
方法3：カスタムHTMLウィジェットを使用する（よりカスタマイズ可能）
ショートコードと一緒に他のコンテンツを表示したい場合もあります。例えば、RafflePress は、ショートコードを使用してサイドバーにコンテストや景品を追加できます。コンテストにさらに注目を集めるために、コンペティションの上にヘッダーを表示したい場合があります。
個別のショートコードブロックと見出しブロックを作成する代わりに、ショートコードとテキストをカスタムHTMLブロックに簡単に追加できます。
これにより、さまざまなコンテンツをきれいに配置できます。HTMLを使用してブロックをスタイル設定することもできるため、サイドバーでの表示方法を正確に制御できます。
詳細については、当社の完全なRafflePressレビューをご覧ください。
カスタムHTMLブロックはデフォルトではショートコードをサポートしていませんが、WordPressにカスタムコードを追加することで簡単に変更できます。このコードを追加すると、WordPressウェブサイト全体で、任意のカスタムHTMLブロックでショートコードを使用できるようになります。
多くの場合、サイトのfunctions.phpファイルにカスタムコードを追加する手順が記載されたガイドが見つかります。しかし、コードの誤りは一般的なWordPressのエラーを引き起こしたり、サイトを完全に破損させたりする可能性があるため、これは推奨されません。
そこが WPCode の出番です。
この無料プラグインを使用すると、サイトを危険にさらすことなく、カスタムCSS、PHP、HTMLなどをWordPressに簡単に追加できます。さらに、テキストウィジェットでショートコードを使用できるコードを含む、既製のスニペットライブラリが付属しています。
まず、WPCodeをインストールしてアクティブ化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
その後、WordPressダッシュボードで Code Snippets » Add Snippet に移動します。「shortcode」と入力し始められます。
表示されたら、次のスニペットにマウスカーソルを合わせます。「テキストウィジェットでショートコードの実行を有効にする」。
次に、「スニペットを使用」をクリックします。
これにより、WPCodeエディターでスニペットが開きます。WPCodeはスニペット設定を自動的に構成するため、単に「非アクティブ」スイッチをクリックして青色にするだけで済みます。
これで完了したら、「更新」をクリックしてスニペットを公開します。
これで、テキストウィジェットにショートコードを追加できます。
外観 » ウィジェットに移動し、検索バーに「カスタムHTML」と入力するだけです。
右側のブロックが表示されたら、ウェブサイトのサイドバーにドラッグします。
これで、ブロックにHTMLとショートコードを追加できます。
ウィジェットの設定が完了したら、「更新」をクリックします。
これで、ウェブサイトにアクセスすると、ショートコードとカスタムHTMLがライブで表示されます。
よくある質問：WordPressサイドバーウィジェットでのショートコードの使用
どのテーマを使用していても、上記のいずれかの方法でサイドバーにショートコードを追加できるはずです。
ただし、さらにヘルプが必要な場合は、ショートコードをサイドバーに追加することに関する最もよくある質問をいくつかご紹介します。
サイドバーウィジェットの表示場所を変更するにはどうすればよいですか？
サイドバーの位置はWordPressテーマによって制御されます。サイドバーの位置に満足できない場合は、テーマ設定を使用して変更できる場合があります。
多くのWordPressテーマでは、さまざまなレイアウトを選択できます。多くの場合、これには画面の異なる側にサイドバーを表示することが含まれます。
利用可能なサイドバー領域を確認するには、WordPressテーマカスタマイザーまたはフルサイトエディターにアクセスできます。
WordPressテーマにサイドバーを追加するにはどうすればよいですか？
テーマにサイドバーがない場合は、子テーマを作成してから、コードを使用してサイドバーを追加できます。
詳細については、WordPressでカテゴリごとにカスタムヘッダー、フッター、サイドバーを追加する方法に関するガイドをご覧ください。
コードを書くのに慣れていない場合は、SeedProdのようなプラグインを使用してカスタムWordPressテーマを作成することもできます。この人気のページビルダープラグインを使用して、簡単なドラッグ＆ドロップエディタで独自のテーマとサイドバーをデザインできます。
手順については、コードなしでカスタムWordPressテーマを作成する方法に関するガイドをご覧ください。
各投稿またはページで異なるショートコードを使用するにはどうすればよいですか？
場合によっては、一部の投稿やページで異なるショートコードを使用したい場合があります。たとえば、アーカイブページに人気の投稿を表示し、ホームページに広告を表示したい場合があります。
WordPressで投稿やページごとに異なるサイドバーを表示する方法については、こちらのガイドをご覧ください。
この記事が、WordPress サイドバーウィジェットにショートコードを簡単に追加する方法を学ぶのに役立ったことを願っています。また、特定の WordPress ページにウィジェットを表示または非表示にする方法に関するガイドや、おすすめの Gutenberg フレンドリーなテーマもご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
デニス・ムトミ
ショートコードとカスタムHTMLおよびCSSクラスを組み合わせた標準化されたテンプレートを作成することで、クライアント固有のスタイリング調整を可能にしながら、一貫したブランディングを維持することがはるかに容易になることがわかりました。
functions.phpを直接編集する代わりにWPCodeを使用することで、さまざまなサイトで多くの潜在的な問題を回避できました。ガイドにそのより安全なアプローチを含めるという素晴らしいヒントです！
Mrteesurez
最後の方法で、ショートコードウィジェットボックスと同じように、元のHTMLウィジェットボックスにショートコードを追加して正常に動作させることができるということですか？
WPBeginnerサポート
For now you should be able to
管理者
ラルフ
ショートコードはWordPressの最も優れた機能の1つです。コードを1箇所変更するだけで、他のすべての場所が自動的に更新されるため、非常に時間を節約できます。大好きです！
Adinsterterを長年使用していましたが、無料版ではショートコードが20個に制限されていました。この方法を知った今、WordPressの標準機能に切り替えるつもりです。
WPBeginnerサポート
Glad you found it helpful
管理者
Arkanum
Thanks! For me it’s work
WPBeginnerサポート
Glad our guide helped
管理者
Zdenko Zec
こんにちは。ローカルホストで開発したウェブサイトで試しましたが、機能しません。テキストウィジェットを使用した場合と、functions.phpにフィルターを追加してカスタムHTMLを使用した場合の両方で試しました。それについてご意見をいただけますか？よろしくお願いします。
WPBeginnerサポート
使用しているショートコードが機能するショートコードであることを確認してください。
管理者
どうもありがとうございます!!
素晴らしい投稿です！どうもありがとうございます
WPBeginnerサポート
You’re welcome
管理者
Muhammad Zeeshan
こんにちは
おはようございます
実際、特定のページに投稿のテキストのみを表示したいのですが、どうすればよいですか？
WPBeginnerサポート
あなたがお探しのようなものについては、以下を参照してください。
https://www.wpbeginner.com/plugins/how-to-insert-wordpress-page-content-to-another-page-or-post/
管理者
ラフル
昨日、ショートコード用のプラグインをインストールしました。しかし、使用できませんでした。でも今は成功しました
WPBeginnerサポート
Glad our article could help
管理者
Ahmer
ショートコードの使い方について、非常に良くて情報量の多い投稿です。
このような記事を探していました。
ショートコードはブログに大きな違いをもたらしますが、多くの人はそれを正しく使用する方法を知りません。
MikeL
カスタムコードオプションは、ウィジェットのテキストコンテンツ領域でのみ機能し、タイトル領域では機能しません。
ニコール
ショートコードは実際にどこで作成するのですか？ このスクリーンショットに表示されている設定はどこで見つけられますか？
Neville
こんにちは。
ウェブサイト開発の経験はありますが、WooCommerceは初めてです。クライアントのために、Avada WPテーマ（5.6.1）をベースにしたウェブサイトを構築しています。これは開発中です。
ホームページにカルーセルがあることがわかりますが、これを置き換えるプラグインを、ギャラリー/グリッド形式でバリアブル製品を表示できるものを探しましたが、見つかりませんでした。価格、カテゴリ、簡単な説明などのWooCommerce製品のバリエーションと連携する必要があります。カートに追加も理想的です。
これを作成するためにショートコードを使用できるかどうか疑問に思っていますか？
もしそうなら、カルーセルを置き換えるためにそれらをどのように追加できますか？
ありがとう。
Neville
ブレンダン
こんにちは、
ご提案いただいたショートコードウィジェットを使ってみましたが、ウィジェットを横並びではなく、縦に積み重ねてしまう状態からまだ抜け出せません。
手伝っていただけますか？
ありがとうございます！
ブレンダン
lukman
It.is.not.working
マシュー・バーケット
こんにちは
サイト固有のプラグインを作成し、アクティベートしました。
現在テーマではショートコードが機能しない別の領域で、ショートコードを機能させようとしています。
Socrates 3.08バージョンテーマを使用しています。
ここに私が作成したスクリーンショットへのリンクがあります。このスクリーンショットには、ショートコードを機能させたい2つの場所を赤い円で囲んで示しています。プラグインを追加したい領域を右クリックし、検査して、ショートコードを機能させようとしているテーマの領域のコードを見つけ、コードのスクリーンショットも追加しました。
サークルで囲んだ2つの領域でショートコードを機能させるために、サイト固有のプラグインに追加できる機能があるかどうか、誰か教えてくれませんか？
Gurpreet Singh Saini
ありがとう、うまくいきました。
ビラル
はい、動作しています。
A WP Life
こんにちは、
WordPressの新しいアップデート4.5.3の後、ユーザーから報告されました。
テキストウィジェットでショートコードが機能しない..
私たちのプラグインは
助けが必要です。よろしくお願いします。
A WP Life
WPBeginnerサポート
競合については、プラグインの作成者に報告してください。
管理者
Vinicius
ありがとうございます！
Monuruzzaman Milon
本当に素晴らしいです。あなたのブログ記事はすべて気に入っています。なぜなら、WordPressテーマ開発について学んでいるからです。add_filterフックの追加について、本当に助かります。
ありがとう、
アルフレド
本当にありがとうございます。
Arra Referees
これ、本当に助かりました。救世主です。特別なサイドバーウィジェットを持つプラグイン（GCAL）を使用していましたが、コードを調べないとカレンダーの下にリンクを追加できませんでした。これを追加してショートコードを使用しただけで、本当にうまくいきました。本当にありがとうございます。4.1.1で動作しています。
マヌエル・マウラー
素晴らしいヒントです。Wordpress 4.0でもまだうまく機能します！
cob-web
This saved my day – thanks!
slim shady
[ ]すべてをショートコードとして解釈しますか？
WPBeginnerサポート
ショートコードが登録されている場合のみです。例えば、ショートコード[apples]がない場合、そのまま表示されます。
管理者
firoz
サイドバーにショートコードを入れたいです
queenofthehivemomof5
PHP関数のテンプレートのphpタグ内に下部を追加してみましたが、ショートコードの周りにRAWコードが表示されたままです。ショートコードは表示されており、その両側に[raw] [/raw]と表示されます。
他に何か提案はありますか？よろしくお願いします！
wpbeginner
@queenofthehivemomof5 PHPタグの間に貼り付ける必要があり、他のどの関数の一部でもないことを確認してください…そのため、一番下に配置するのが最善です。
queenofthehivemomof5
functions.phpファイルの特定の場所に貼り付けるべき部分がありますか？私には機能していないようです。ショートコードの出力は得られますが、「Raw」に囲まれています。
[raw][/raw]タブ1タブ2タブ3[raw][/raw]タブコンテンツ1[raw] [raw] [raw][/raw]（そのようなもの）
edward.caissie
このコード行は、ショートコードを持つプラグインに追加でき、同様の効果が得られます。ただし、子テーマのfunctions.phpファイルにコード行を追加する方が、将来性のある方法です。