Wordpressのためのマルチレベルの垂直階層ネストメニュー

Wordpressのためにマルチレベル、入れ子になった、SEOフレンドリーなナビゲーションメニューを追加する - パート2

2009年7月10 gesman

完璧な垂直メニューの探求...

このチュートリアルのパート1はのための水平方向のマルチレベルのネストしたメニュー構築のステップのプロセスバイステップで説明Wordpressの論文のテーマを 第2部では、この機能を強化する上で続行されます。 ここでは、水平方向のナビゲーションメニューの"ダーク"バージョンを追加し、私はどのように"明るい"と"ダーク"バージョンを切り替えることをお教えします。 パート2はパート1のスーパーセットです。 それはパート1からすべて含まれている+もっとクールなものを追加します。

私が提示したいと主なアイデアは、垂直メニューを追加している (と一般的にワードプレスに)。 私は無制限のネストレベルを作成できるようになる本当に柔軟性、SEOフレンドリーなマルチブラウザ互換の縦メニューを探していました。

WEBは、対象のページのトンを持っていますが、私はすべてのこれらのサンプルを試し始めたとき - 彼らはどちらか、決裂離れて落ち、サポートされるレベルの数は限られてたり、ゲイツ+バルマー氏のjunksplorer 6で誤動作。 最後に私が試したと信頼にもどってきたのダイナミックドライブのメニューがその垂直のサンプルは私の厳しい要件に合った素敵なケースであることが証明として。 私はそれが論文のモデルに適合することを確認するのに著しく、それらを変更する必要がありました。
完璧さの追求は続く...

私は組み立て、検索は約16時間を費やし、時間のテスト、修正、研磨と垂直メニューのCSSと。jsのコードをチューニングすると3 / 4はそれがMSIE 6で動作するように行うために費やされた。
とにかく、私は最終的な結果に満足している。 結果、垂直ナビゲーションメニューがあり、すべて同じ利点水平メニューが持っていることを。

垂直方向のメニューを追加する機能を持つことは、Web上のポータルの約70〜80%に非常に重要です。 水平方向のメニューは、多くのメニューの選択肢に対応するために"スペース"を限られているが、垂直方向のメニューにはこの制限はありませんし、非常に役立つだろう。 それではご覧ください。

それを実現するために手順の多くは、既にに記載されているチュートリアルのパート1これはビットが短い方のためにそれを作るされるように、しかし、はるかに機能が豊富な結果に。

そうここに行く:

建物SEOフレンドリーな、Wordpressとの垂直、マルチレベル、階層的にネストされたメニュー ステップバイステップ
(...何を考えたことがない...)

  1. インストールexecのPHPプラグインをしてアクティブにします。 私は垂直方向のメニュー"HTMLコードを出力するテキストウィジェットの内部でPHPを使用するので、我々はそれが必要になります。
  2. から6 -手順1を実行してくださいチュートリアルのパート1 基本的には、インストールしてアクティブに使用NAVTプラグを+視覚的にメニューを構築する必要があります。 あなたのメニューのグループ名は"MENU1"であることを確認してください。 この名前はcustom_functions.phpにハードコードされています
  3. それのプロパティを編集するには、"MENU1"グループの"歯車"アイコンをクリックしてください:
    navt_customize_menu
  4. "オプション"、"表示"と"CSS"タブの設定を設定するには、パート1のチュートリアルのステップ7.1 -7.3に従います。
  5. 今、このダイアログの"テーマ"タブをクリックします。 我々はそこにいくつかの設定を(手順1を追っている場合)が上書きされます。 あなたが何かを失うことはありません - - これはokですが、私はステップ1からいくつかのコードを変更したので、これらの変更が必要とされています。
    ここでは、このダイアログは、記入する必要がある方法は次のとおりです。
    1. 内部の"テーマのxpath:"の面積は(それはこれらのクラスを持つ任意のタグを置き換えるためのコマンド)は、このコードを入力します。
      .jquerycssmenu, .jqueryslidemenu
    2. "置換"に"アクション"を設定する
    3. エリア"ナビゲーショングループの前に追加タグ"の内側にこのコードを入力:
      <div class='jquerycssmenu' style='margin-top:5px;'>
    4. エリア"ナビゲーショングループの後に追加タグ"の内側にこのコードを入力:
      <br style='clear: left' /></div>
    5. [閉じる/保存]ボタンをクリックします。
  6. 今すぐWordpressの管理者パネルに行く - >外観 - >ウィジェット。
  7. 右側の"サイドバー1"エリアに"テキスト"ウィジェットを(ビッグ"使用可能なウィジェット"エリアから)をドラッグします。 私たちは、私たちは、垂直メニューを具体化するために役立つテキストウィジェットにコードを追加していく予定です​​。
    注:私は存在の"サイドバー1"を持っていることを想定。 論文のオプションを使用すると、それをオフにすることができます - しかし、このチュートリアルのためにそれがようにしましょう​​。
  8. 一度ドラッグして、このウィジェットをドロップ - それは、花(私はMSIEの闘争が終わったので今ロマンチックな感じている)のように開きますなります。
  9. "タイトル"エリアで"世界最高の垂直方向のメニュー"を入力...さて、あなたの創造性を自由に使用する感じ - このテキストは、新しく生まれた垂直メニューの上に移動します。
  10. テキストのための大きい領域で - このPHPコードを入力します。
    <?php
    if (function_exists('navt_getlist'))
    $menu_html = navt_getlist ('menu1', false, '', 'ul id="dd_vertical"');
    else
    $menu_html = "";
    $menu_html = preg_replace ('#class=[\'\"]jquery(css|slide)menu[\'\"]#', 'class="dd_vertical"', $menu_html);
    echo $menu_html;
    ?>
  11. を押して[保存]ボタンは、"閉じる"リンクをクリックしてください。
  12. ここでファイルのセットは更新をダウンロードしてください
    このアーカイブには含まれています:


    • "明るい"水平メニューのコードのアップデートバージョン
    • 水平メニューの"ダーク"バージョン
    • 垂直方向のメニューコード
    • custom_functions.phpのアップデートバージョン
  13. 今、あなたはこのアーカイブを解凍しての'custom'ディレクトリにそれをアップロードする必要が
    注:あなたがcustom_functions.php内の任意のカスタマイズを行っている場合 - あなたがそれらをマージする必要があるだろう。 されていない場合は - 私のバージョンで上書きすること自由に感じなさい。
  14. 出来上がり! 今すぐあなたのウェブサイトをリロードし、左サイドバーに同じ"明るい"水平方向のメニュー+格好いい垂直メニューが表示されることがあります。
  15. ボーナスのタスク:"暗い"カラースキームに"明るい"水平方向のメニューを変更してみましょう。
    1. custom_functions.phpファイル内の:
      このコードを置き換えます:
      echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
      //echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu

      このコードで:
      //echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
      echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu

      基本的には、一行をコメントアウトし、もう一方のコメントを外している。
    2. 今すぐWordpressの管理 - >ツール - > NAVTリストに移動し、"MENU1"グループのプロパティを編集するために上記の"歯車"アイコンをクリックします。
    3. "テーマ"タブをクリックします。
    4. エリア"ナビゲーショングループの前に追加タグ"の内側にこのコードを入力:
      <div class='jqueryslidemenu' style='margin-top:5px;'>
    5. 今すぐ - あなたのページをリロード - して、メインの水平ナビゲーションメニューは、"魔法のように"暗い、のようなものとなった。
      Thesis theme - multilevel nested CSS menu - dark palette

      -マルチレベルのネストしたCSSのメニュー-暗いパレット

      ダークカラーパレットは、淡い色のものより、特定のサイトより適している可能性があります。 だから今は、あなたの人生における選択の自由を持っている!

    6. "明るい"のカラースキームに戻るために - ちょうど"ボーナス"上記の手順を元に戻す。
  16. 結論:
    私が愛する 、私はWordpressを愛し、私は我々のポータルにまともなナビゲーションメニューを追加する方法を持っているという事実を愛する。

20ドル


お楽しみください!

グレブEsman

コメントを残す

前のポスト: