Web サイトのトップページのリンク ボタンを美しくする: get_pages() メソッドを使用します

前のチュートリアルに従った場合は、サイトのヘッダーにトップレベル ページへのリンクを含むテーマ (またはサブテーマ) がサイトに作成されます。

26 の子テーマを作成しました。現在のリンクは次のようになります:

このチュートリアルでは、テーマに CSS を追加してリンクをもう少し改善する方法を説明します。まずは箇条書きを削除し、フロートを追加してみましょう。

箇条書きを削除し、フロートを追加します

テーマのスタイルシートを開きます。子テーマを作成した場合は空になりますが、独自のテーマを使用している場合は、ヘッダー スタイルを保持するスタイルシートのセクションにこのスタイルを追加することをお勧めします。

出力ページリンクのコードレビュー (リンクするページがある場合):

リーリー

これは、クラス top-level-page-links を持つ ul 要素とその中の li 要素をターゲットにしていることを意味します。 -link クラスの後には a 要素 (つまり、リンク) が続きます。

まず、弾丸を削除しましょう。これを追加： ＃＃＃ リーリー

次に、各リスト項目のパディングを削除し、

margin-left

ステートメントを追加しましょう: リーリー ここで画面を更新すると、リスト スタイルが消えていることがわかります:

次に、これらのリンクを隣り合ってフロートさせます。これをスタイルシートに追加します:

リーリー

これで、リンクが隣り合うようになります:

次に、リンクをボタンのように見せる作業に進みます。

マージン、パディング、背景を追加する

リンクをボタンのように見せるために、リンクにマージン、パディング、背景を追加します。

これをスタイルシートに追加します:

リーリー

左側のボタンをページの左側に揃えたかったので、右側のマージンのみを使用したことに注意してください。

画面を更新すると、ボタンはよりボタンらしく見えます:

見た目はかなり良くなりますが、少しスキルが必要です。テキストと背景の色を編集して、ボタンの上にカーソルを置くと色が変わるようにしましょう。

ホバー効果を追加する

次に、これらのボタンをさらに魅力的にしてみましょう。

さらに 2 つの宣言ブロックをスタイルシートに追加します。追加したばかりのリンクの宣言ブロックの後に必ず追加してください:

リーリー

これにより、リンクの色が変更され、下線が削除され、誰かがリンクの上にマウスを移動したとき、またはリンクがアクティブになったときに色が変更されます。

ページ上でどのように表示されるかを見てみましょう:

リンクにカーソルを合わせると:

＃＃＃＃＃＃＃＃＃＃＃＃ずっといい！

＃＃＃まとめ＃＃＃

この 2 部構成のチュートリアルでは、Web サイトの自動的に生成されたトップレベル ページへのリンクを作成し、CSS を使用してそれらのリンクをボタンのように見せる方法を学びました。

これにより、訪問者をこれらのページに直接誘導するための優れた目立つ方法が得られます。これは、多数の訪問者がトップ ページにアクセスできるようにしたい場合に便利です。

以上がWeb サイトのトップページのリンク ボタンを美しくする: get_pages() メソッドを使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。