すべてのWordPressサイトは異なります。 これは皆が場所のための別の主題か”外観や質”を選ぶのである。 WordPressでヘッダーとトップナビゲーションメニューを作成することは、サイトごとに若干異なるプロセスになります。

私は絶対にそれを愛するので、ここで私はWordPressの創世記のテーマフレームワークを使用しています。 しかし、この記事では、WordPressのウェブサイトで誰かを助けることが重要なポイントになります。

これは私がゼロからウェブサイトを作成する一連の記事やビデオの一部です。 私は最初にGenesisフレームワークの子テーマを作成する方法を説明し、その後、背景とロゴを追加してテーマのスタイルを開始することについて書きました。

ヘッダーにFacebookリンク、Twitterリンク、その他の情報を追加

既に当サイトのヘッダーの左上にロゴを追加しましたので、ヘッダーの右側に追加情報を追加します。 この場合、TwitterやFacebookのリンクなどを追加します。、ウィジェットを介して。

私は最近、少しウィジェットが狂ってしまったことを認めなければなりません。 ウィジェットとは何ですか？ まあ、彼らはあなたの周りにドラッグして、使いやすいウィジェット領域を介して制御することができ、ウェブサイトの自己完結型のビッ

創世記の多くの美しさの一つは、それがウェブサイトの任意の領域をwidgetizeする楽な能力です。 だから:

• あなたはサイドバー上のボックスの別の順序をしたい場合は、数秒でそれを行うことができます。
• あなたはここに注目の記事をしたい場合は、ホームページ上にサムネイルがある5つの最新のカテゴリ見出し、あなたは数秒でそれを行うことができ
• 検索バー、ソーシャル共有、Twitterフィード、カレンダー、タグクラウドなどが必要な場合は、
• 検索バー、ソーシャル共有、Twitterフィード、カレンダー、タグクラウドなどが必要な場合は、、ここで、そこに、またはどこでも、あなたは数秒でそれを行うことができます。

この直感的で使いやすいバックエンド機能は、ウェブサイトのすべての領域を制御する機能を望んでいるが、これを行うスキルがないクライアント

とにかく、このインスタンスでは、私たち自身のカスタムウィジェットを作成する必要があり、我々はWordPressの外観>ウィジェットインターフェイスのヘッ

そして、このテキストウィジェットでは、HTMLを置くことができます。 ここに私がこの特定のサイトのために置いたHTMLがあります。 私はちょうどFacebookページのリンク、Twitterのリンクと電話番号を持っています。

<div>
<ul>
<li><a href=""><img src="http://site.com/images/facebook.jpg" style="border:0;" /></a></li>
<li><a href=""><img src="http://site.com/images/twitter.jpg" style="border:0;" /></a></li>
</ul>
<p><strong>Tel:</strong> +44 20 xxxx xxxx</p>
</div>

そしてここに上記のスタイルを設定するCSSがあります:

#connect {float: right;}
#connect ul {float: right;}
#connect ul li {list-style: none; display: inline;}
#connect p#tel {margin-top: 33px; font-size: 18px; color: #66504e;}

ここでは、結果として頭の右側に表示されるものです:

見出し情報とナビゲーションメニューの追加のビデオ

このビデオでは、ヘッダーにウィジェットを追加する方法と、Genesisでメニューをスタイルアップする方法

トップナビゲーションメニューの作成

トップナビゲーションメニュー（または”navbars”）は私の存在の悩みの種でしたが、今、GenesisとWordPressのメニューで、私は時間ではなく秒か

Genesisには、プライマリとセカンダリのナビゲーションメニューを持つ機能が既に用意されています。 この特定の例では、クライアントが唯一のものを望んでいたように、私は創世記のテーマ設定を使用して二次ナビゲーションメニューを

上のビデオでは、CSSを修正してメニューをPSDビジュアルのように見せる方法を示しています。

Chrome Developer ToolsまたはFirefox用Firebugアドオンを使用すると、HTML内のどのセレクタがCSSで使用されているかを判断してメニューのスタイル

#nav {-khtml-border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
background: #745d5c url(images/nav.gif) repeat-x ;
border: 1px solid #745d5c;
width: 958px; }

上記のビデオでわかるように、丸みを帯びた角の半径を増やし、グラデーションの背景を追加し、メニューの境界線の色を変更しました。 だから今のメニューは、あなたがバニラ創世記のインストールで得る退屈な灰色のもののように見えません。

また、メニュー内のテキストの色を白に変更するために、次のCSSを追加しました。

#nav li a {color: #fff; }

現在のページリンク、ホバーリンク、サブページリンク、サブサブページリンクのスタイルを変更する機能もあります。

Genesisでは、サブページ（または子ページ）のドロップダウンメニューを簡単に設定し、サブサブページ（または孫ページ）のリンクをフライアウトすることができます。 これらは、プライマリナビゲーションメニューとセカンダリナビゲーショ

ページ、子ページ、孫ページの作成

ここでは、新しいページをWordPressメニューに追加して、ナビゲーションメニューにページ、子ページ（ドロップダウンとして）、孫ページ（フライアウトとして）として表示するビデオです。

ページエディタで、親の下で子ページまたは孫ページにするページを選択できます。 また、ページ（Pages>All Pages）を見ると、子ページと孫ページが親の下にインデントされます。 これを行うと、論理的なURLも表示されます（たとえば、ページ「Charlie Parker」が「Jazz」の子であり、「Music」の子であるwww.site.com/music/jazz/charlie-parker）。

ドロップダウンとフライアウトを備えたナビゲーションメニューの作成

これらのページをナビゲーションメニューに正しく表示するには、外観>メニューのそれぞれの位置にドラッグアンドドロップするだけです。 ここでも、子ページは親の下にインデントされます。 メニューに名前を付けることを忘れないでください（例えば、”navbar”のような）、それを主要なナビゲーションメニューに設定します。

だから、ワードプレスの外観>メニュー領域にページを配置するには、次のようにします…

… このようなフライアウトを持つドロップダウンメニューを作成します:

これのデモについては、上記のビデオを参照してください。

あなたはどう思いますか？

ウェブサイトのヘッダーとナビゲーションメニューを編集するこの方法についてどう思いますか？ あなたは別の方法でそれを行うのですか？