あなたのウェブサイトのヘッダーエリアにWordPressウィジェットを追加しますか？

ウィジェットを使用すると、WordPressテーマの指定されたセクションにコンテンツのブロックを簡単に追加できます。

このチュートリアルでは、WordPressウィジェットをWebサイトのヘッダーに簡単に追加する方法を示します。

Note：これは中級レベルのチュートリアルです。 コードをに追加する必要があります WordPressテーマのファイル CSSをマスターします。

ただし、変更を行う前に、 バックアップあなたのブログに5 WordPressのプラグイン または WordPressのテーマをインストールする方法 et どのように多くのプラグイン私はワードプレスにインストールする必要があります.

それでは、ここにいる理由に戻りましょう。 

なぜ、いつヘッダーにウィジェットを追加する必要があるのですか？

ウィジェットを使用すると、WordPressテーマの指定された領域にコンテンツのブロックを簡単に追加できます。 これらの指定された領域は「 サイドバー 「またはの領域」 ウィジェット'。

ヘッダーのウィジェット領域を使用して、広告、最近の記事などを表示できます。

この特定のドメインは、非常に重要な情報を表示するために、すべての一般的なWebサイトで使用されます。

発見も WordPressに投稿した後にカスタムウィジェットを追加する方法

原則として、 WordPressテーマ コンテンツの横またはフッター領域にサイドバーを追加します。 コンテンツの上またはヘッダーにウィジェット領域を追加する WordPress テーマはほとんどありません。

私たちも発見することをお勧めします フランス語でMailChimpチュートリアル：ニュースレターを作成するための完全なガイド

そのため、このチュートリアルでは、WordPress Webサイトのヘッダーにウィジェット領域を追加する方法を示します。

ステップ1：ウィジェット領域を作成する

まず、カスタムウィジェットエリアを作成する必要があります。 この手順により、「」にカスタムウィジェット領域を表示できます。 外観>ウィジェット WordPressダッシュボード上。

このコードをファイルに追加する必要があります のfunctions.php あなたのテーマ。

function bpc_widgets_init（）{register_sidebar（array（ 'name' => 'カスタムヘッダーウィジェットエリア'、 'id' => 'custom-header-widget'、 'before_widget' => ' '、' after_widget '=>' '、' before_title '=>' '、' after_title '=>' '、））; } add_action（ 'widgets_init'、 'bpc_widgets_init'）;

このコードは、WordPressテーマに新しいサイドバーまたはウィジェット領域を保存します。

WordPressをローカルにインストールしたことがない場合は、 XAMPPで/のWindows PC上でローカルのWordPressのインストール方法

「に行くことができます 外観>ウィジェット また、「 カスタムヘッダーウィジェットエリア '。

先に進み、この新しく作成した領域にテキストウィジェットを追加して保存します。

また試してみる ウィジェットの追加に関するガイド.

ステップ2：ウィジェットをヘッダーに表示します

Webサイトにアクセスすると、追加したばかりのテキストウィジェットが表示されなくなります。

ゾーンの表示方法をまだ示していないため カスタムウィジェット ワードプレス。

これがこのステップで行うことです。

こちらもあなたのリストです ブログの収益を高める5 Critical WordPressプラグイン

ファイルを編集する必要があります header.phpの WordPressテーマで、ウィジェットを表示する場所にこのコードを追加します。

変更を保存することを忘れないでください。

その後、Webサイトにアクセスすると、ヘッダーにテキストウィジェットが表示されます。

結果は必ずしも最も魅力的ではありません。 そのため、正しく表示するにはCSSが必要です。

3ステップ：CSSヘッダーにスタイルを付けます

WordPressテーマに応じて、ヘッダーとウィジェット領域の表示方法を制御するためのCSSコードを追加する必要があります。

これを行う最も簡単な方法のXNUMXつは、CSSHeroを使用することです。 後者を使用すると、直感的なユーザーインターフェイスを使用してWordPressテーマのCSSを変更できます。

これを発見することもお勧めします WordPress Yellow Pencilプラグインで何ができますか？

プラグインを使用しない場合は、WordPressテーマにカスタムCSSを追加できます。それには、 外観»カスタマイズ WordPressテーマをカスタマイズします。

記事もご覧ください ブログのトラフィックを改善する10 WordPressプラグイン

これにより、WordPressカスタマイザインターフェイスを表示できるようになります。 「」をクリックする必要があります 追加のCSS '。

タブ« 追加のCSS 「で カスタマイザ 右側のプレビューで変更を表示しながら、カスタムCSSを追加できます。

このチュートリアルに固有の理由により、この領域を使用して、バナー広告を表示する単一のウィジェットまたはカスタムメニューウィジェットを追加することを想定しています。

開始するためのCSSの例を次に示します。

DIV＃ヘッダウィジェット領域{幅：100％以下; 背景色：#f7f7f7。 border-bottom：1px固体#eeeeee。 テキスト整列：センター; } H2.chwタイトル{マージントップ：0px。 テキスト整列：左; テキスト変換：大文字; フォントサイズ：小; 背景色：#feffce。 幅：130px。 パディング：5px。 }

カスタムウィジェットがTwenty Seventeenテーマヘッダーにどのように表示されるかを以下に示します。

プレミアムWordPressプラグインもご覧ください  

他にも使えます WordPressのプラグイン モダンな外観を与え、ブログやウェブサイトの取り扱いを最適化します。

ここでは、そのためのプレミアムWordPressプラグインを提供しています。

1。 Smart4yツールチップ

Smart4y ツールチップは WordPressのプラグイン Javascript ライブラリに依存せずに最新のツールチップを作成するための柔軟なツールです。 これは完全にレスポンシブで、HTML コンテンツを挿入する可能性を提供します。

WYSIWYGエディターを使用すると、コードを入力しなくても各ツールチップを視覚的に作成できますが、必要に応じていつでも実行できます。

私たちも発見 ブログの記事を評価するための10 WordPressプラグイン

その他の機能は次のとおりです。 ビルダーページのサポート、かなり応答性の高いレイアウト、すべてのツールチップのグローバルパラメータを定義する機能、または各ツールチップの特定のパラメータを定義する機能、事前定義された視覚効果のサポート、サイズ変更されたウィンドウでのツールチップの位置の計算、詳細なドキュメントなど…。

ダウンロード| デモ| ウェブホスティング

2。 正当化

Le WordPressのプラグイン Justified は、Flickr のように、jQuery を使用してサムネイルを正当化されたグリッドに配置するレスポンシブ ギャラリー プラグインです。 

それはあなたのギャラリーを競合他社のものと区別する機能をもたらします！

主な機能は、レスポンシブレイアウト、特別なフライオーバーエフェクト、自動グリッド再配置、  ショートコードエディター、外観e完全にカスタマイズ可能な、pのサポート視聴者と 他の多くの…

ダウンロード | デモ | ウェブホスティング  

3。 スケジュールメール

ce WordPressのプラグイン 名前が示すように、Web サイトでの電子メールの公開をスケジュールできます。 これは、「Follow My Blog Post」WordPress プラグイン拡張機能の一部です。

これで、時間、日、または週に従って電子メールの公開をスケジュールできるようになります。

記事もご覧ください あなたのウェブサイトの地図を使うための10 WordPressプラグイン

通知ごとにメールを送信するのではなく、通知ごとに組み合わせたメールを送信する可能性があります。また、メールごとに異なるメールテンプレートを定義して、メールの受信をよりわかりやすくすることもできます。 。

ダウンロード | デモ | ウェブホスティング

推奨リソース

ウェブサイトの構築と管理に役立つ他の推奨リソースをご覧ください。

• ワードプレスのExcelとWord文書を作成する方法
• ダッシュボードのWordPressロゴをカスタマイズする方法
• WordPressのテーマを編集するファイルを検索する方法
• WordPress WebサイトのCSSをカスタマイズする方法

まとめ

それだけです！ このチュートリアルはこれですべてです。WordPressテーマのヘッダーにウィジェット領域を追加するのに役立つことを願っています。 することを躊躇しないでください お気に入りのソーシャルネットワークで友達と共有する. 

しかし、あなたも私たちに相談することができます ressources、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログの作成。

提案や意見がある場合は、セクションに残してください commentaires.

...