コードなしでカスタムWordPressサイドバーを作成する方法

コードなしでカスタムWordPressサイドバーを作成する方法を学びたいですか？

適切に設計されたサイドバーは、ユーザーエクスペリエンスを向上させ、ユーザーのナビゲーションを向上させます。 ただし、デフォルトのWordPress設定を使用してサイドバーをカスタマイズすることは、必ずしも簡単ではありません。 そして、コーディングはさらに困難です。

この投稿では、いくつかの簡単な手順でWordPressにサイドバーを追加する方法を紹介します。

カスタムWordPressサイドバーを追加する必要がある理由

サイドバーは、訪問者に見てもらいたい重要な情報を表示するためのシンプルで効果的な方法を提供します。 多くのWordPressサイトでは、関連する投稿、ソーシャルメディアページ、オプチンフォームへのクイックリンクを提供するためにサイドバーを専用にするのが一般的です。

これにより、ユーザーに最高のユーザーエクスペリエンスを提供し、訪問者にサイトの見たい領域を紹介することができます。 その結果、サイドバーを使用すると、ページビュー、滞在時間、エンゲージメント、コンバージョンを増やすことができます。

多くのWordPressテーマには既製のサイドバーが付属していますが、一部のWordPressプラグインで得られるような簡単な視覚的カスタマイズは提供されていません。

SeedProdは、ドラッグアンドドロップ機能が簡単なサイドバーを作成するための最高のWordPressプラグインです。 したがって、SeedProdを使用して、コードなしでWordPressにサイドバーを追加する方法を示します。

コードなしでカスタムWordPressサイドバーを作成する方法

WordPressでサイドバーを追加する方法については、以下の手順に従ってください。

1. SeedProdのインストール
2. テーマテンプレートの選択
3. WordPressサイドバーのカスタマイズ
   • サイドバー内に連絡フォームを追加する
   • WordPressサイドバー内に最近の投稿を追加する
   • サイドバーからのアイテムの削除
4. 変更の保存とサイドバーの公開

はじめましょう。

1.SeedProdのインストール

まず、SeedProdをサイトにインストールする必要があります。 インストール方法がわからない場合は、WordPressプラグインのインストール方法に関するこのチュートリアルを参照してください。

SeedProdのWordPressテーマビルダー機能（サイドバーを作成する必要があります）にアクセスするには、SeedProdProライセンスを購入する必要があります。 購入してSeedProdでアカウントを作成したら、アカウント領域にログインして[ダウンロード]タブに移動します。 ここに、ライセンスキーがあります。 それをコピーします（これは後で必要になります）。

WordPressダッシュボードから、 SeedProd »設定に移動します。 この画面に、 [ライセンスキー]フィールドが表示されます。 ここにライセンスキーを貼り付けて、[確認]ボタンをクリックします。

SeedProdがサイトに設定されたので、サイドバーの作成タスクを簡単にするためにいくつかのテンプレートを利用してみましょう。

2.テーマテンプレートの選択

WordPress管理エリアから、 SeedProd»テーマビルダーをクリックします。

これは、サイドバーを含むさまざまなテーマ要素すべての設定を制御できるメインダッシュボードです。

次に、オレンジ色のテーマボタンをクリックします。

SeedProdには、マーケティングエージェンシー、レストラン、住宅ローンブローカーなど、さまざまな種類の企業や組織向けのさまざまなテーマがあります。 ビジネスに最適なテーマを選択し、希望どおりに表示されるまでサイドバーをカスタマイズできます。

この例では、スターターテーマを使用します。これは、単純なWebサイトに最適です。 テーマを選択すると、テーマビルダー領域にテーマを構成するすべての重要な部分が自動的に入力されます。

必要に応じて、それぞれの異なる部分を有効または無効にできます。 この例ではブログページにサイドバーのみを使用するため、サイドバーとブログインデックス、アーカイブ、検索、パーツのみを有効にしておくことにします。

[公開済み]見出しの下にあるトグルボタンを使用して、テーマの他の部分を無効にし、サイドバーを[はい]ステータスのままにしました。

これで、サイドバーのカスタマイズを開始する準備が整いました。

3.WordPressサイドバーのカスタマイズ

WordPressサイドバーのカスタマイズを開始するには、SeedProdテーマビルダーダッシュボードのサイドバーオプションにカーソルを合わせて、[デザインの編集]をクリックします。

これにより、テーマビルダーインターフェイスが開きます。 スターターテーマのサイドバーには、検索バー、カテゴリ、およびソーシャルメディアアイコンがデフォルトで有効になっています。

ただし、サイドバーに要素を追加したり、既存の要素を別の要素に置き換えたりすることができます。 左側のペインには、サイドバーのライブプレビューである右側の領域にドラッグアンドドロップできる大量のブロックがあります。

以下に、いくつかの一般的なサイドバーのカスタマイズを実行する方法を示しますが、これらはすべてオプションの手順です。

サイドバー内に連絡フォームを追加する

この例では、サイドバーに簡単な連絡フォームを追加する方法を示します。 ただし、最初に、WPFormsがインストールされていることを確認してください。 これについてサポートが必要な場合は、WPFormsのインストールに関するこのドキュメントを参照してください。

WPFormsは自動的にSeedProdと統合されます。 したがって、WPFormsで作成したフォームは、SeedProdを使用してサイドバー内にブロックとして追加できます。

これを行うには、[ブロック]タブの下の検索バーに「お問い合わせフォーム」と入力するだけです。 次に、 ContactFormブロックをサイドバーの配置する場所にドラッグアンドドロップします。

フォームをサイドバーに配置した後、WPFormsブロックをクリックしてフォームオプションを開きます。 ここから、作成済みのフォームを追加したり、[ +新しいフォーム]ボタンを押して新しいフォームを作成したりすることもできます。

[フォームの選択]ドロップダウンメニューをクリックしてリストから1つ選択することにより、WPFormsで既に作成したフォームを使用します。

これがフォームの外観です。

フォームを編集する必要がある場合は、[選択したフォームの編集]をクリックします。 これにより、同じウィンドウでWPForms Builderが開き、テーマBuilder画面を離れることなく必要な変更を加えることができます。

それ以外の場合は、[詳細設定]タブに移動してフォームのデザインをカスタマイズできます。 ここで、SeedProdは、フォームのスタイル、属性、間隔、およびデバイスの可視性を変更するためのオプションを提供します。

たとえば、サイトがモバイルで表示されているときにサイドバーを非表示にする場合は、[デバイスの表示]メニューをクリックしてから、[モバイルで非表示]ボタンをオンにします。

次に、ブログのサイドバーに最近の投稿を追加する方法を紹介します。

WordPressサイドバー内に最近の投稿を追加する

もう一度、テーマビルダーの[ブロック]タブの下にある検索フィールドを使用して、「最近の投稿」と入力します。 次に、[最近の投稿]ブロックを表示する領域にドラッグアンドドロップします。

新しいブログ投稿がWebサイトに公開されると、最近の投稿ウィジェットが自動的に入力されます。

ビルダーの右側に配置されているウィジェットをクリックすると、表示する投稿の数を制御するなどの設定にアクセスできます。

サンプルテストサイトには3つの投稿しかありません。 ただし、サイドバーに表示する最近の投稿を5つ含めることをお勧めします。

サイドバーからのアイテムの削除

SeedProdテーマビルダーを使用すると、サイドバーから要素を削除するのは、新しいアイテムを追加するのと同じくらい簡単です。

この例では、サイドバーから検索バーブロックを削除します。 サイドバーから削除するパーツを決定するのは完全にあなた次第です。 デモンストレーションのために検索バーを削除するだけです。

通常、サイドバーをシンプルで焦点を絞った状態に保つことがベストプラクティスと考えられているため、サイドバーにあまり多くのウィジェットを含めないようにしてください。

ブロックを削除するには、削除するブロックの周囲にオレンジ色の輪郭が表示されるまでマウスを移動し、ゴミ箱アイコンを押します。

次に、削除アクションを確認するためのプロンプトが表示されます。 はいを押して削除してください！ 先に進むためのボタン。

サイドバーからブロックや要素を削除するのに必要なのはこれだけです。

4.変更の保存とサイドバーの公開

サイドバーを好みに合わせてカスタマイズしたら、右上の[保存]ボタンをクリックします。

次に、十字ボタンをクリックしてテーマビルダーを終了します。

このアクションにより、ブログページにサイドバーが追加されます。 フロントエンドからサイトのブログページを開いて、新しく作成したWordPressサイドバーを確認します。 （この例では、ソーシャルメディアアイコンとお問い合わせフォームのみが有効になっています）。

以上です！ これで、WordPressにサイドバーを追加し、好みに合わせてカスタマイズする方法をマスターしました。

次に、メールサブドメインを設定します

メールの評判を維持し、高い配信率を維持したいですか？ その場合は、メールサブドメインの設定を検討する必要があります。 メールレピュテーションをより適切に管理し、メールサブドメインを設定する方法については、メールサブドメインに関するガイドをご覧ください。

また、電子メールの配信可能性とその重要性についても学びたいと思うかもしれません。 詳細については、メールの配信可能性の向上に関する記事を確認してください。

メールを修正する準備はできましたか？ 最高のWordPressSMTPプラグインを今すぐ始めましょう。 WP Mail SMTP Eliteには、完全なWhite Glove Setupが含まれており、14日間の返金保証があります。

この記事が役に立った場合は、FacebookとTwitterでフォローして、WordPressのヒントとチュートリアルを確認してください。