WordPressでスティッキーヘッダーを作成する方法

公開: 2021-06-10

過去10年ほどで、Webサイトのナビゲーションにますます重点が置かれてきました。これは、従来のデスクトップインターフェイスと比較してナビゲーションオプションが制限されているスマートフォンの普及と一致しています。 2011年のサイトと現在作成されているサイトを比較すると、ウェブサイトのデザインの違いは明らかです。

サイトレイアウトの再構成に使用された主な方法の1つは、スティッキー要素でした。適切な名前が付けられたこれらの要素は、ページを移動するときに境界線上に貼り付けられます。つまり、元の位置を維持します（Excelのフリーズペインを考えてみてください。どのように機能するかがわかります）。

上、下、左、右

スティッキー要素は通常、メニュー、ヘッダー、ステータスバー用に予約されています。これらは、訪問者がまったく後戻りすることなく、あるページから次のページに即座に切り替えることができるため、訪問者に大きな柔軟性をもたらします。また、これらはすべて、最初はページの上部と下部の境界に配置されており、前提全体でうまく機能します。ページの中央に配置されたスティッキー要素の周りにページを作成することは非常に困難です。

まれに、同じ機能で、レイアウトが異なるだけで、左右の境界線に表示されることもあります。このような場合、カーソルでカーソルを合わせるか、画面上でタッチするまで非表示になります。

スペースセーバー

スティッキー要素の興味深い点は、ページとサイト全体のスペースを節約できることです。実際には、ページ全体を置き換えるために使用できます。これは、サイトの本体をそのままにして、ページの多くの機能を自分で引き受ける多機能ツールである境界線を作成するためです。平均的なサイトレイアウトについて少し考えてみてください。

上部は、指定されたカテゴリと検索バーでソートされたページを含むメニュー用に予約されています。これらは両方とも、スクロール中はバーの後ろに隠され、必要に応じて展開されます。そうでない場合は、メニューツリーのみがページの上部全体を占め、下にスクロールしても「フォロー」されないため、訪問者はページをナビゲートするためだけに常に上下に移動する必要があります。。

一方、スティッキーな下部要素は、サポートページ全体を非常に簡単に置き換えることができます。チャットボタンと一緒にメールアドレスや番号を追加するだけで、準備完了です。あなたはあなたの訪問者にあなたに連絡するための常に存在する方法を提供しています。繰り返しになりますが、実用的なアプリケーションは素晴らしいものです。顧客は製品ページをスクロールして質問をし、チャットボタンをクリックすることで必要なものをすぐに見つけることができます。

スティッキー要素の作成

私たちがWordPressについて話しているとき、あなたが考えることができることについては常に多くの方法があります、そして同じことがここでも当てはまります。デフォルトのエディター内でスティッキー要素を手動で作成することも、コーディングの必要性を初心者向けのインターフェースに置き換えるプラグインを使用することもできます。最終結果間のコントラストは最小限ですが、そこに到達する方法がすべての違いを生みます。この例では、スティッキーヘッダーを使用します。これは、スティッキーヘッダーが最も一般的な要素であるためです。

スティッキーヘッダーを手動で作成する

WordPressでスティッキーヘッダーを手動で作成するには、CSSコードを使用する必要があります。技術的になりすぎることなく、CSSコードは、ページ上の実質的にすべての要素に追加して、そのプロパティを変更できるものです。手動でコーディングする場合、これがカスタマイズの主な方法です。 CSSを最初に使用するには、ヘッダーがページに存在する必要があるため、最初にカスタマイズするものがあることを確認してください。 WordPressは、デフォルトのエディターでさえクリックで追加するオプションを提供するため、このプロセスを簡素化します。

使用するヘッダーができたら、コンソールにアクセスする必要があります。ダッシュボードの左側にある外観セクションに移動し、[カスタマイズ]を選択して、[追加のCSS]をクリックするだけです。コンソールが開いた状態で、ヘッダーを固定するコードを入力する必要があります。

 #website-navigation { background:#fff; height:60px; z-index:170; margin:0 auto; border-bottom:1px solid #dadada; width:100%; position:fixed; top:0; left:0; right:0; text-align: center; }

上記のコードは、一般的にどのように見えるかを示す単なる例であり、すべてを網羅する決定的なコマンドではありません。最初の行は常に各サイトに固有であることに注意してください。ページエディタに戻る前に、＃website-navigationをCSSクラスまたはナビゲーションヘッダーのIDに置き換えてください。

ページ/投稿プレビューウィンドウ内の機能を確認したら、公開するだけで、スティッキーヘッダーが表示されます。 CSSコードを拡張して、このようなヘッダーの「スティッキー」属性以上のものを含めることをお勧めします。カラーフォント、サイズなど、ヘッダーを視覚的に強調するものを追加することをお勧めします。インデントなど。ページ上の恒久的な固定具であるため、見落とされがちです。目立つようにしてください。

プラグインを使用してスティッキーヘッダーを作成する

彼らのビジネスやブログのためにウェブサイトを必要とするものと、単にプロフェッショナルな見た目と感じの何かを構築するための知識を持っていないものとの間には大きな重複があります。幸いなことに、WordPressには、すべての人の生活を楽にするプラグインがたくさんあります。目標を達成するために、基本的なソフトウェアの知識以上のものを所有する必要はほとんどありません。 WP Stickyは、上記で説明したすべてのコーディングを、誰でもすぐに入手できるユーザーフレンドリーなインターフェイスに置き換えるプラグインの優れた例です。同時に、スティッキーヘッダーを手動で作成する場合と同じ量の機能を提供します。分解してみましょう。

要素の作成

CSSを使用しているときに最初にヘッダーが必要なのと同じように、要素を作成して、それにスティッキー属性を追加する必要があります。

要素を選択するには、2つの異なる方法があります。必須フィールドに指定を入力するか、プレビューウィンドウをクリックして要素を選択することができます（これは、指定を理解するのに問題があるかどうか疑問に思います）。プレビューウィンドウで要素を選択すると、画面の上部に指定の変更が表示されます。

プラグインをしばらく使用した後は、プラグインに慣れて、ビジュアルピッカーを使用することはほとんどないことがわかりました。指定がわかりやすくなり、手作業で簡単に入力できるので、時間を節約できます。あなたがその程度に精通するまで、ビジュアルピッカーはあなたの親友になります。最終的には、どちらの方法でも同じ場所、つまりフロントエンドのスティッキーヘッダーに移動できます。

見栄えを良くする

すべてのスティッキー要素が同じように作成されるわけではありません。また、あなたの要素も一般的な例であってはなりません。ビジュアル設定セクションには、スティッキーヘッダーをあらゆる点で一意にするために使用できる多数のカスタマイズオプションが用意されています。

最初に説明する必要があるのは、要素の配置です。ヘッダーを作成しているので、これは簡単な決定になります–ページの上部に貼り付けます。ポジショニングは優れたヘッダーの鍵となるため、ページの最上部をハグしたくない場合は、数ピクセル下に移動してフィット感を高めることができます。さらに、サイトで登録ユーザー用の管理ツールバーを使用している場合は、プラグインで自動的にチェックして、それに応じてヘッダーを調整できます。

潜在的な訪問者がWebを閲覧しなければならない方法はたくさんあるので、完全にレスポンシブであるためのサイトの必要性について少し触れました。サイトを完全に適応させるために、ヘッダーを固定する画面を選択できます。

通常、小さい画面はスティッキーヘッダーを最大限に活用しますが、ナビゲーションオプションが多い従来のデスクトップで使用される大きい画面は、スティッキーヘッダーがなくても問題ありません。サイズは、すべての主要な画面サイズをカバーする4つのグループに分けられます。

Z-indexはオプションの設定であり、一見すると多くの人を混乱させる可能性があります。これとそれがオプション機能であるという事実のために、多くの人はおそらくそれを振り払って無視するでしょう。すべてがうまくいけば、おそらく振り返ることさえないでしょう。ただし、表示に問題がある場合は、Z-indexが迅速な解決策になる可能性があります。基本的に、ページは、上のスタックの数が下のスタックよりも多いスタックのコレクションと考えてください。したがって、スティッキーヘッダーを覆い隠しているものがある場合は、Zインデックスを上げてみてください（有効な値として99999が推奨されます）

スティッキーヘッダーが「スタックの一番上」になったら、下にスクロールしながらエフェクトを追加して、さらにクリエイティブになりましょう。両方のオプションを無効にすると、ヘッダーは元のページの切り抜き部分のように上部に配置されたままになります。フェードインやスライドダウンなどのエフェクトを使用して、フレアを追加できます。これらのタイプの効果を選択する前に、サイトの全体的なビジュアルデザインを検討してください。ただし、多くの場合、少ないほど多くなります。

視覚効果は、動きに関連するものだけに限定されません。ヘッダー自体をカスタマイズすることもできます（ヘッダーの作成中に行った移動に加えて）。不透明度は、ヘッダーがページ上の他のコンテンツを覆い隠したくない場合に役立ちます。約50％に設定すると、ヘッダーとその下のコンテンツの両方が比較的見やすくなります。

不透明度よりもさらに便利な機能は、スクロール範囲を調整することです。ブログのように非常に長いページがある場合は、粘着性のあるヘッダーを使用しても意味がない場合に、ナビゲートする際に特定のポイントがあります。これらは、訪問者が十分に下にスクロールした後でヘッダーを剥がすのが良い考えであるときです。

最後に、粘着性がある場合はヘッダーの背景色を変更してさらに目立たせるオプションがありますが、ヘッダーが粘着性がなくなった場合は元の値に戻します。

ビジュアル編集の最後の部分では、CSSを使用してスティッキーヘッダーを手動で編集することに完全に戻ります。

WP Stickyを正常に使用するために、コーディングに関する予備知識は実際には必要ありませんが、WP Stickyを使用すると、作業が向上する可能性があります。この機能はオプションであるため、使用するかどうか、およびどの程度使用するかは完全にあなた次第です。

高度なオプション

詳細オプションのセクションは、ほとんどすべて除外に関するものです。つまり、どのような場合にスティッキーヘッダーがスティッキーでなくなり、「元のプログラミング」に戻ります。

ヘッダーが固定されない画面サイズを手動で設定することは、ビジュアル設定セクションに表示される4つのデフォルトサイズのステップアップです。ここでは、必要に応じて具体的にすることができるので、将来、所定のサイズのいずれにも適合しないワイルドスクリーンが発生した場合は、それに適したルールを作成できます。

ヘッダーを固定しないようにすることは、画面サイズだけでなく、サイトのコンテンツ、より具体的には分類にも関係します。指定されたページ、投稿と投稿の種類、特定のカテゴリ、または特定のタグが付いたコンテンツにヘッダーが固定されないようにすることができます。スティッキーヘッダーを使用する場合と使用しない場合で、これらすべての条件を組み合わせて、完璧な概要を作成できます。

最初にスティッキー要素（この場合はヘッダー）を選択したのと同様に、ヘッダーをプッシュアップするページの下部にあるプッシュアップ要素を選択することもできます。これにより、基本的にヘッダーがこの要素の境界に移動し、間にパディングやスペースはありません。

すべてを終わらせるために、あなたがうんざりしていて、もう粘着性の要素が欲しくないとき、それを完全に削除する最後のオプションが常にあります。これは永続的なアクションであり、要素（この場合はヘッダー）に対して行ったすべてのカスタマイズが失われることに注意してください。

概要

どちらのやり方が良いかはわかりません。 CSSを使用すると、間違いなくより多くのオプションを自由に使用できますが、それは全体としてごく少数の人々にとっての解決策です。一方、WP Stickyのようなプラグインは、使いやすさと堅牢な機能を兼ね備えているため、初心者や最初からコーディングすることに不安がある人に最適です。おそらく、粘着性のある機能するヘッダーを作成するための最良の方法は、後者から始めて、前者まで自分で作業することです。

著者：Matej Milohnoja

ゲームやゲーム全般について書くために使用されていましたが、その後、Web開発ソフトウェアについてのテストと書き込みに切り替えました。それを楽しむためだけに、まだたくさんのゲームをプレイしています。