WordPressの粘著性の頭と管理バーの重複の問題を解決する WordPressテーマでは、粘著性のヘッド(または固定位置ヘッド)が管理バーと重複しています。どちらも
を使用して、視覚的な競合をもたらします。管理者はZ-Indexの99999を持っているため、通常、被験者の粘著性の頭をカバーします(逆も同様です)。この記事では、CSS(およびSASS)を使用してこの問題を解決する方法について説明します。 position: fixed; top: 0;
(注:一部のトピックはJavaScriptを使用して粘著性要素を見つけます。JavaScriptがインラインプロパティを更新し続ける場合、次の方法は無効です。
top
CSSを使用してヘッド位置を調(diào)整します
簡単にするためには、
位置値は0であると仮定します。
値がオフセットされている場合、次の測定値を調(diào)整する必要があります。
.sticky-header
管理バーがフロントエンドで表示されると、WordPressはtop
管理バーの高さは32pxです。粘著性の頭を下に移動するだけです。しかし、問題は、管理バーの高さが常に32pxではないということです。 .admin-bar
小さな畫面用の css
header.php
body_class();
幅が783px未満の畫面では、管理バーの高さは46pxです。補償するには、コードを変更する必要があります
top
/* 原有CSS... */ .sticky-header { position: fixed; top: 0; } /* 新增CSS... */ .admin-bar .sticky-header { top: 32px; }
SASS
と再利用可能な混合物を作成しますを受け入れます。オフセットが指定されていない場合、Mixinは0であると想定します。手動で指定すると、
を指??定すると、.admin-bar .sticky-header { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .sticky-header { top: 46px; } }條件がデフォルトの管理列の高さ値を変更します。
の使用方法:
.admin-bar .sticky-header { top: 46px; } @media screen and (min-width: 783px) { .admin-bar .sticky-header { top: 32px; } }
結(jié)論
上記のコードスニペットを通じて、粘著性の頭とWordPress管理バーの対立を簡単に解決できます。 SASS Mixinは、コードの再利用性を向上させます。
@mixin admin-sticky-fix( $offset: 0 ) { $narrow-offset: 46px; $wide-offset: 32px; @if $offset != 0 and type-of($offset) == 'number' { $narrow-offset: $narrow-offset + $offset; $wide-offset: $wide-offset + $offset; } .admin-bar & { top: $narrow-offset; @media screen and (min-width: 783px) { top: $wide-offset; } } }
FAQ(FAQ)$offset
top
(記事が長すぎて擬似オリジナルの目標と一致しないため、FAQパーツはここで省略されています。PAQパーツは、必要に応じて追加または変更できます。
以上がスティッキーヘッダーとWP管理バーを動作させるの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。

ホットAIツール

Undress AI Tool
脫衣畫像を無料で

Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ

AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中國語版
中國語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統(tǒng)合開発環(huán)境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック

WordPressがサーバーCPU使用の急増を引き起こす主な理由には、プラグインの問題、非効率的なデータベースクエリ、テーマコードの品質(zhì)の低さ、またはトラフィックの急増が含まれます。 1.最初に、トップ、HTOP、またはコントロールパネルツールを介したWordPressによって引き起こされる高い負荷であるかどうかを確認します。 2.トラブルシューティングモードを入力して、プラグインを徐々に有効にしてパフォーマンスのボトルネックをトラブルシューティングし、QueryMonitorを使用してプラグインの実行を分析し、非効率的なプラグインを削除または交換します。 3.キャッシュプラグインをインストールし、冗長データをクリーンアップし、スロークエリログを分析してデータベースを最適化します。 4.トピックには、コンテンツの過負荷、複雑なクエリ、キャッシングメカニズムの欠如などの問題があるかどうかを確認します。標準のトピックテストを使用して、コードロジックを比較および最適化することをお勧めします。上記の手順に従って、場所を確認して解決し、問題を1つずつ解決します。

JavaScriptファイルをマイニングすると、ブランク、コメント、役に立たないコードを削除することにより、WordPress Webサイトの読み込み速度を向上させることができます。 1。W3TOTALCACHEなどの圧縮をサポートするキャッシュプラグインを使用し、「MINIFY」オプションで圧縮モードを有効にし、選択します。 2。FastVelocityMinifyなどの専用圧縮プラグインを使用して、より細かい制御を提供します。 3. JSファイルを手動で圧縮し、FTPを介してアップロードします。これは、開発ツールに精通しているユーザーに適しています。一部のテーマまたはプラグインスクリプトは圧縮関數(shù)と競合する可能性があり、アクティベーション後にWebサイト機能を徹底的にテストする必要があることに注意してください。

プラグインに依存しないWordPressサイトを最適化する方法は次のとおりです。1。積み重なったテーマを避けるために、AstraやGeneratePressなどの軽量テーマを使用します。 2. CSSおよびJSファイルを手動で圧縮およびマージして、HTTP要求を削減します。 3.アップロードする前に畫像を最適化し、WebP形式を使用し、ファイルサイズを制御します。 4. configure.htaccessブラウザキャッシュを有効にし、CDNに接続して靜的リソースの負荷速度を向上させます。 5.記事の改訂を制限し、定期的にデータベース冗長データをクリーンにします。

オブジェクトキャッシュは、高いアクセスと低更新に適した永続的なストレージを支援し、短期の失われたデータを許容します。 1.キャッシュの「永続性」に適したデータには、ユーザー構(gòu)成、一般的な製品情報などが含まれます。これらはデータベースから復(fù)元できますが、キャッシュを使用して加速できます。 2. Redis、RDBやAOFモードの有効化などの永続性をサポートするキャッシュバックエンドを選択し、合理的な有効期限ポリシーを構(gòu)成しますが、メインデータベースを置き換えることはできません。 3.長いTTLを設(shè)定するか、キーの期限が切れないように、ユーザー:1001などの明確なキー名構(gòu)造を採用:データを変更するときにキャッシュを同期して更新します。 4.ローカルと分散したキャッシュを組み合わせて、小さなデータをローカルおよびビッグデータRedisを保存してビッグデータを保存し、一貫性とリソースの使用の問題に注意を払いながら、再起動後に回復(fù)に使用できます。

Transientapiは、自動有効期限データを一時的に保存するためのWordPressの組み込みツールです。そのコア関數(shù)は、set_transient、get_transient、delete_transientです。 OptionsAPIと比較して、Transimentsは、Cache API要求の結(jié)果や複雑なコンピューティングデータなどのシナリオに適した、生存時間(TTL)の設(shè)定をサポートしています。それを使用する場合、キーネーミングと名前空間の獨自性、キャッシュ「怠zyな削除」メカニズム、およびオブジェクトキャッシュ環(huán)境では続かない問題に注意を払う必要があります。一般的なアプリケーションシナリオには、外部要求頻度の削減、コード実行リズムの制御、ページの読み込みパフォーマンスの改善が含まれます。

コメントスパムを防ぐ最も効果的な方法は、プログラマティックな手段を介して自動的に識別して傍受することです。 1.検証コードメカニズム(Googler CaptchaやHcaptchaなど)を使用して、特に公共のWebサイトに適した人間とロボットを効果的に區(qū)別します。 2.隠しフィールド(ハニーポットテクノロジー)を設(shè)定し、ロボットを使用して機能を自動的に埋めて、ユーザーエクスペリエンスに影響を與えることなくスパムコメントを識別します。 3.コメントコンテンツのブラックリストを確認し、敏感な単語の一致を通じてスパム情報をフィルタリングし、誤判斷を避けるために注意を払ってください。 4.コメントの頻度とソースIPを判斷し、単位時間あたりの提出數(shù)を制限し、ブラックリストを確立します。 5.サードパーティのスパムサービス(Akismet、CloudFlareなど)を使用して、識別の精度を向上させます。ウェブサイトに基づいていることができます

PluginCheckは、WordPressユーザーがプラグインの互換性とパフォーマンスをすばやくチェックするのに役立つツールです。主に、現(xiàn)在インストールされているプラ??グインに、WordPressの最新バージョン、セキュリティの脆弱性などと互換性がないなどの問題があるかどうかを特定するために使用されます。インストールとアクティベーションの後、バックグラウンドの「runaScan」ボタンをクリックして、すべてのプラグインを自動的にスキャンします。 2。レポートには、プラグイン名、検出タイプ、問題の説明、およびソリューションの提案が含まれています。これにより、深刻な問題の優(yōu)先処理が容易になります。 3. WordPressを更新する前に検査を?qū)g行することをお勧めします。ウェブサイトの異常が異常である場合、または定期的に実行されて隠された危険を事前に発見し、將來の大きな問題を回避することをお勧めします。

Gutenbergブロックを開発する場合、エンキュー資産の正しい方法には次のものが含まれます。1。register_block_typeを使用して、editor_script、editor_style、およびstyleのパスを指定します。 2。functions.phpまたはプラグインでwp_register_scriptとwp_register_styleを介してリソースを登録し、正しい依存関係とバージョンを設(shè)定します。 3.適切なモジュール形式を出力し、パスが一貫していることを確認するためのビルドツールを構(gòu)成します。 4. Add_Theme_SupportまたはEnqueue_Block_Assetsを介してフロントエンドスタイルの読み込みロジックを制御して、フロントエンドスタイルのロードロジックが確保されるようにします。
