Uncodeのコンテンツブロックを使用してカスタムヘッダーを作成する方法

WordPressを使用すると、ページや投稿にヘッダーを簡単に含めて、コンテンツを補完するように論理的に整理できます。 ただし、基本的な見出しオプションでは、特に特徴的な外観が得られない場合があります。 クリエイティブなカスタムヘッダーは、読者の興味を引き、サイトをパーソナライズするのに最適な方法です。

幸い、Uncodeは、VisualComposerベースのコンテンツブロック機能を使用してこのタスクを簡単にします。 この機能を使用して、カスタムコンテンツを作成し、それをWebサイトのさまざまな部分に統合できます。 たとえば、ヘッダーを作成して保存し、サイト全体に組み込んだり、特定の投稿やページに配置したりできます。

この記事では、このプロセスを段階的に説明します。 最初にコンテンツブロック機能について詳しく説明し、次にそれを使用してカスタムヘッダーを設計する方法について説明します。 始めましょう！

Uncodeのコンテンツブロック機能の概要

Uncodeは、特別に設計されたバージョンのVisual Composerを使用します。これにより、ビジュアルインターフェイスを介してアイテムをドラッグ、ドロップ、および編集することにより、投稿やページをカスタマイズできます。 コンテンツブロックは、サイトのほぼどこにでも簡単に配置できるコンテンツのセクションを作成する方法です。

コンテンツブロックを使用して、次のようないくつかの異なるページ要素をデザインできます。

• カスタムヘッダー：静的ヘッダーと動的ヘッダーの両方を作成し、サイトの特定の場所に挿入したり、全体に組み込んだりできます。
• カスタムフッター：これらはヘッダーと同様のプロセスで作成でき、ウィジェットやアクションの呼び出しを含めるのに理想的です。
• ページフラグメント：テキスト、メディア、およびその他のデザイン要素をコンテンツブロックに追加することで、ほぼすべてのタイプのコンテンツモジュールを作成し、好きな場所に挿入できます。

この記事では、カスタムヘッダーを作成する方法を紹介します。 ただし、これから説明する内容の多くは、コンテンツブロック機能を使用して他の要素を構築するために簡単に適用できることに注意してください。 ヘッダーのデザインに慣れたら、フッターやページフラグメントの作成を試すために必要なものが揃っているはずです。

Uncodeのコンテンツブロック機能を使用してカスタムヘッダーを作成する方法（3つの簡単なステップで）

始める前に、いくつかの主要なプラグインがアクティブになっていることを確認する必要があります。 Uncodeで、プラグインに移動し、 Uncode Core 、 Uncode Visual Composer 、およびVisualComposerClipboardがすべてインストールされてアクティブ化されていることを確認します。 これらのプラグインのいずれかが欠落している場合は、 [コード解除]> [プラグインのインストール]に移動し、必要に応じてプラグインごとに[インストール]または[アクティブ化]を選択します。

また、VisualComposerがコンテンツブロック機能を使用できるようにする必要があります。 Visual Composer> Role Managerに移動し、[投稿の種類]ドロップダウンを見つけます。 ここから、[カスタム]を選択し、[ uncodeblock]というラベルの付いたボックスがオンになっていることを確認します。 [変更を保存]をクリックすると、新しいヘッダーの作成を開始する準備が整います。

ステップ1：新しいコンテンツブロックを作成する

まず、ヘッダーを含むコンテンツブロックを作成する必要があります。 WordPressダッシュボードの左側のメニューで[コンテンツブロック]に移動し、[新規追加]を選択します。 エディターに移動し、ヘッダーのタイトルを入力できます。 ここでクラシックモードになっていることを確認してください（これにより、Visual Composerが有効になります）。 そうでない場合は、[バックエンドエディタ]ボタンをクリックしてモードを切り替えます。

[要素の追加]というラベルの付いたボックスが表示されます。それを選択し、表示されるメニューから[見出し]を選択します。 これにより、ヘッダー要素がエディターに配置され、 [見出し設定]メニューが表示されます。

これで、ヘッダーのデザインを開始できます。

ステップ2：ヘッダーをカスタマイズする

これは、 [見出しの設定]メニューでクリエイティブなオプションとパーソナライズされたオプションを取得して、必要なヘッダーを作成するチャンスです。 タブごとに選択肢を見ていきましょう。

まず、[全般]タブを確認します。 ここで、ヘッダーテキストを入力し、そのサイズ、フォーマット、および外観を決定できます。

必要に応じて、代わりに[自動見出しテキスト]オプションを選択できます。これにより、モジュールにページタイトルをメインヘッダーテキストとして使用するように指示されます。 これにより、各バージョンを手動で変更しなくても、複数のページで使用できるヘッダーを作成できます。

本文の下に表示される小見出しを含めることもできます。 必要に応じて、[セパレータ]ドロップダウンを使用して、メインヘッダーとサブ見出しの間に分割線を作成できます。

テキストのカスタマイズが終了したら、[応答]タブに切り替えます。 ここで、カスタムヘッダーをデスクトップ、タブレット、モバイルデバイスのいずれに表示するかを決定できます。 次に、[アニメーション]タブで、ヘッダーを特別なアニメーションとともに表示するかどうかを選択できます。

先に進む前に、[見出しの設定]ボックスを少し閉じて、見出し要素の左側と下部にある鉛筆アイコンをクリックします。 これにより、行設定と列設定が開き、追加の設計変更を行うことができます。

たとえば、 [列の設定]> [アスペクト]で、テキストの水平方向と垂直方向の配置を調整できます。 次に、 [行の設定]> [スタイル]で、ヘッダーの背景色を設定するか、[背景メディア]ボックスを使用して代わりに画像をインポートできます。

また、 [行の設定]> [スタイル]で、自動背景機能を有効にすることができます。 このように、ヘッダーを投稿に追加すると、その投稿のカテゴリに固有の背景画像が自動的に取得されます。 [投稿]>[カテゴリ]で、カテゴリごとに注目の画像を設定できます。

ここで発見できる追加のオプションはたくさんあるので、デザインに満足するまで、自分のペースでそれらを探索することをお勧めします。 完了したら、[公開]ボタンを押します。

ステップ3：投稿とページにヘッダーを配置する

これでヘッダーが設計されて準備が整いましたが、まだサイトに表示されていません。 それを変える時が来ました！ 最初に、カスタムヘッダーを個々の投稿またはページに追加する方法について説明し、次にそれをサイト全体に組み込む方法について説明します。

ヘッダーを表示する投稿またはページを開くことから始めます。 次に、エディターの下にある[ページオプション]メタボックスまで下にスクロールし、左側のメニューの[ヘッダー]をクリックします。 [タイプ]で、[コンテンツブロック]が選択されていることを確認します。 次に、[コンテンツブロック]で、公開したヘッダーを選択します。

ここで設定できるオプションは他にもいくつかあります。たとえば、 Scroll Opacity （ユーザーがページを下に移動したときにアニメーションを有効にする）やScroll Down Arrow （名前が示すとおりの矢印ボタンを作成する）などです。 [メニューコンテンツパディングの削除]をオンにして、ヘッダーとメニューの間のスペースを減らすこともできます。

ただし、すべてのページにヘッダーを追加する場合は、[コード解除] > [テーマオプション]に移動して、[ページ]タブをクリックする必要があります。 ここから、[ヘッダー]を選択し、[タイプ]ドロップダウンメニューで[コンテンツブロック]を選択します。 前と同じように、コンテンツブロックの下で公開したヘッダーを見つけて選択します。

ここから[不透明度をスクロール]および[下向き矢印をスクロール]オプションにアクセスでき、ヘッダー幅も変更できます。 設定の編集が完了したら、[変更を保存]をクリックすると、カスタムヘッダーがサイトのすべてのページに表示されます。 これと同じプロセスが投稿にも適用されることに注意することが重要です。[ページ]ではなく[投稿]タブに移動するだけです。

別のアプローチ：カルーセルヘッダーを設計する

これまで、静的ヘッダーを作成およびカスタマイズする方法について説明してきました。これは、多くの状況に最適です。 ただし、動的バージョンが必要な場合は、いくつかの異なるヘッダー間を循環するカルーセルを作成できます。 プロセスは上記の手順と似ていますが、いくつかの重要な違いがあります。

手順1のように新しいコンテンツブロックを作成することから始めますが、今回はコンテンツスライダーモジュールを追加します。 スライドというラベルの付いたボックスが表示されます–プラス記号をクリックして、見出し要素を追加します。 そこから、必要な数のスライドを作成するために必要な回数だけ[スライドの追加]ボタンを選択し、それぞれに見出し要素を配置できます。

次に、2番目のステップで概説したように、含める各ヘッダーを設計します。 ここから、完成したヘッダーにカーソルを合わせ、 [見出しのクローン]を選択してコピーを作成することにより、ヘッダーを複製することもできます。 次に、それを別のスライドにドラッグして、それに応じて変更を加えることができます。

ヘッダーのデザインが終了したら、[スライド]にカーソルを合わせ、鉛筆アイコンをクリックして[コンテンツスライダー設定]メニューに入ります。 [スライドの自動回転]で、ヘッダーがスライドからスライドに循環する速度を変更できます。数値が大きいほど、スライドの回転が遅くなります。

このメニューでは、ナビゲーション速度を設定することもできます。 これにより、ユーザーがスライドを手動でナビゲートしたときのスライドの回転速度が変わります。必要に応じて、このオプションを無効にすることもできます。 最後に、トランジションタイプをフェードに変更して、ヘッダーを水平方向に循環させるのではなくフェードインおよびフェードアウトさせることができます。スライドを無限に回転させる場合は、ループをオンにすることができます。

完了したら、 [公開]をクリックして、手順3の説明に従って、新しいカルーセルヘッダーをページと投稿に追加します。 とても簡単です！

結論

サイトを印象的で視覚的に魅力的なものにしたい場合は、基本的なオプションを超えて、デザインにパーソナライズされた要素を追加することをお勧めします。 ページや投稿を紹介するカスタムヘッダーを作成することは、まさにそれを行うための創造的な方法です。 さらに、Uncodeを使用すると、プロセスが単純で簡単になります。

この投稿では、コンテンツブロック機能を使用してカスタムヘッダーを作成する方法の概要を説明しました。 手順を簡単に要約してみましょう。

1. 新しいコンテンツブロックを作成します。
2. ヘッダーをカスタマイズします。
3. 投稿とページにヘッダーを配置します。
4. または、静的ヘッダーの代わりにカルーセルヘッダーを設計します。

Uncodeで素晴らしいカスタムヘッダーを作成する方法について質問がありますか？ 下のコメントセクションで質問してください！