コードを1行も書かずにWordPressで要素をスティッキーにする方法

ページ上の要素にstickypositionプロパティを使用しているサイトがますます頻繁に見られます。 名前が示すように、プロパティを使用すると、元の位置から移動した後でも、指定された要素をページに「貼り付ける」ことができます。 位置スティッキーは、実際には、クラシックのようなもう1つのCSS位置プロパティであり、静的、相対、絶対、および固定です。

ページ上にある要素は、コードでCSSを使用することでそのように配置できます。 HTMLフレーム内でCSSがどのように機能するかを知っている人にとって、プロセスはかなり単純です。適切な場所に数行のコードを配置します。

ただし、この時点で言及する価値のある2つの重要なことがあります。 主に上部の要素（メニューバー、検索フィールド、ヘッダーなど）に使用されますが、sticky positionプロパティはページの任意の部分で使用できます。つまり、要素をページの右側、左側、または下部に貼り付けることができます。ページ–あまり考慮されないもの。 もう1つのポイントは、今日では、ビジネスでもプライベートでも、誰もがWebサイトを必要としているという事実ですが、実際にCSSの使用方法を知っている人はごくわずかです。

結局のところ、コーディングをさらに深く掘り下げる時間は常にありますが、サイトを今すぐ稼働させる必要がある場合は、単純化されたソリューションに頼る必要があります。 ほとんどの人がこれらのタイプの取り組みを開始するための優先プラットフォームとしてWordPressを選択しているため、実行可能なプラグインに検索を集中し、すぐに1つが飛び出しました–WPSticky。 何かを貼り付ける必要がある場合は、WPStickyがそれを実行します。

コーディングも問題もありません

先に述べたように、サイト管理の最大の問題の1つは、アイデアの欠如ではなく、それらのアイデアを実現するための知識の欠如です。 さまざまなページビルダー、オールインワンホスティングサービス、バックグラウンドおよびテーマパッケージなどを使用して、何かをルックアンドフィールにするために、基盤となるコードについてあまり知る必要がないようになりました。良い。

純粋主義者は、これらすべてが優れたコアスクリプトに取って代わることはできず、おそらく正しいと言うでしょうが、Webプレゼンスを必要とするが、コーディングの煩わしさを必要としない企業/個人は数多く存在します。それが付属しています。

使用するコア機能は、基本、視覚、高度の3つのグループに分けられ、最初にスティッキー要素を追加する個別のボタンと、ほとんど自明の削除オプションがあります。

それでは、最初から始めましょう…

要素の追加と基本設定

ページに貼り付けたい要素を追加するには、[新しいスティッキー要素を追加]ボタンをクリックするだけです。これは簡単なことではありません。 それが終わったら、名前を付けて、ページ上のどの要素にするかを選択する必要があります。

複数のスティッキー要素を作成できるため、タイプや機能（メニュー、ヘッダー、検索など）との相関関係を使用して名前を付けることをお勧めします。これにより、それらがリストされているサイドバー。

これで、要素に名前を付けました。次に、ページから1つを選択します（これらのアクションはどちらの順序でも実行できます）。 要素を選択するには、[要素を選択]ボタンをクリックするだけで、サイトのプレビューが表示されます。次に、要素をクリックして、貼り付けたい要素を選択します。 進行状況を選択して保存すると、その要素はフロントエンドからサイトにアクセスするすべての人にとってスティッキーになります。

視覚的な設定

これは、スティッキー要素の表示方法を制御するセクションであり、視覚的な機能のためにこれらすべてを実行しているため、おそらくほとんどの時間を費やすセクションです。

最初に選択するのは、要素がくっつく位置です。 すでに述べたように、ほとんどの場合、ページの上部に表示されますが、必ずしもそうである必要はありません。ページのほぼどこにでも要素を貼り付けることができます。

位置について話している間、オプションで、要素をページの上部から（ピクセル単位で）分離するか、必要に応じて画面の上部境界に固定したままにします。 さらに、要素はバックエンドユーザーにも適用されるため、ページを下に移動してツールバーを表示したままにするときに、要素が管理ツールバーの下にくるようにいつでも設定できます。

この次の部分は興味深いものです。 つまり、そのページが表示されている画面のサイズに応じて、要素がページに貼り付くタイミングを設定できます。 画面が設定された指定よりも大きい場合、要素はスティッキーな位置がまったくないように動作します。

4つの異なるデフォルトサイズ（ピクセル単位で表示）があり、詳細設定でカスタムサイズを設定することもできます（これについては後で説明します）。

このような機能は、サイトの応答性に大きく貢献し、電話、タブレット、デスクトップのユーザーにも同様に実行可能になります。 Webブラウジングはデバイス間で等しく多様化されていることを考慮に入れてください（最近は小さな画面に向かっています）。おそらく、この機能に他のどの機能よりも感謝することになるでしょう。

興味深い点は、サイズの表示方法（「ピクセル数」よりも小さい）です。これは、大きな画面ではなく、小さな画面でスティッキー要素が優先されることを示しています。

指定されたスティッキー要素を覆い隠す可能性のある要素がある場合は、Zインデックスがあります。 このページは、特定の要素が他の要素の上に配置されているスタックのコレクションと考えてください。 Zインデックスが高いほど、これらのスタック内の要素は高くなります。

したがって、スティッキー要素が不明瞭になっている状況に遭遇した場合は、すべてを正しく設定するために、途方もなく高い数値を手動で入力するだけです（99999はオプションのすぐ下に提案されています）。

要素が表示される効果、より具体的には要素がどのように表示されるかを追加するオプションが追加されました。 2つのオプションは、フェードインとスライドダウンです。 スティッキーポジションは、下にスクロールしても表示されたままの上部要素で使用されるため、スライドダウン効果は当然の選択ですが、フェードインを使用できる場合もあります。 いずれにせよ、あなたはカバーされています。

粘着性のある要素を表示したいが、それでもページを占有しすぎないようにする場合は、不透明度をカスタマイズできます。 約50％に設定すると、下の要素とコンテンツの両方が表示されます。 本当に隠したくないものがある場合、これは使用する機能です。

最後に、スクロール範囲、つまり要素が粘着性を開始および停止するポイントを調整します。 これらのポイントは両方とも、ページ全体のパーセンテージとして表されます。 たとえば、要素が上部にあるヘッダーである場合、訪問者がすでに少し下にスクロールした後、約10〜15％で粘着性を持たせる必要があります。

次に、中間点（45〜55％）付近では、ヘッダーがまだ表示されている必要はありません。その時点では、ヘッダーは冗長であり、スペースを浪費するだけだからです。

開始点とカットオフポイントは、2つのスライダーを備えたインタラクティブバーを使用して簡単に定義できます。 バーのすぐ横にパーセンテージが表示されるので、スライダーを上下にどれだけ動かしたかを推測する必要はありません。 数が足りない場合は、いつでもプレビューに移動して、フロントエンドからどのように見えるかを直接確認できます。

高度な設定

詳細設定は、主に、今説明した設定の例外に焦点を当てています。 すでに触れた最初の2つのオプションは、要素が固定されない画面のサイズを表します。 要素がデフォルトの位置になる最小サイズと、それを超えると同じ位置になる最大サイズを定義できます。

一般的な使用では、これは4つのデフォルトサイズのビジュアル設定でほぼカバーされていますが、サイズをもう少し制御する必要がある場合は、ここで入手できます。

腕立て伏せの要素は、スティッキー要素にすでに使用したのとほぼ同じ方法で割り当てることもできます。 これらは通常、ソーシャルメディアアイコンの付いたフッターまたは行です。 この機能はすべて、スティッキー要素（通常は上）とプッシュアップ要素（通常は下）の間の見えない線を押し上げるだけです。 これを使用して素晴らしい効果を作成すると同時に、ディスプレイの混雑を緩和することができます。

最後のオプションは、画面サイズではなく、サイトのセクションではなく、除外に関するものです。 固定するように指定した要素が固定されない場所を選択できます。 これらは、特定のページまたは投稿、カテゴリ全体、一意のタグ、または投稿タイプにすることができます。

サイトが非常に多様で、スティッキー要素が必要になるのはごく一部である場合、またはすべてのページに表示されない複数のスティッキー要素を使用している場合は、オンとオフを切り替えるオプションがあると便利です。自動的。

詳細オプション–モード

今述べた高度な要素設定と混同しないように、高度なオプションは一般的なプラグインの動作に焦点を当てています。 ほとんどのユーザーはそれらを使用することはありませんが、異常値の場合、それらは価値があることが証明される可能性があります。

必要に応じて、3つのモードをアクティブにできます。

これらとは別に、コンソールでプラグインエラーをログに記録することもできます。 WP Stickyは、現在のほとんどすべてのテーマとプラグインとシームレスに連携しますが、問題が発生した場合は、あなたまたはタスクを委任した誰かが、それらの原因に関する追加情報を取得できます。

結論

WP Stickyは、面倒なことなく非常にうまく機能する特殊なツールです。 したがって、粘着性のある要素を作成したい場合は、ページ全体でそれらをカスタマイズして整理すると、すばやく簡単に行うことができます。

ユーザーインターフェイスの扱い方が初心者向けですが、ある程度の知識を身につけた後でも、収穫逓減することなく自信を持って使い続けることができます。