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

このチュートリアルのパート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

comments } { 5件のコメント }

完璧なメニューのためのクエスト...

これはチュートリアルのパート1です。
このチュートリアルのパート2は、水平方向いずれかに縦のメニュー+ダークカラーパレットを構築する方法を教えて

私は取得することを決めた論文のテーマを私のクライアントの一つは論文と私の間に互換性の問題についての私に知らせているため、 ワードプレスの会員サイトのプラグイン MemberWing。 私はそれを修正し、論文を詳しく見ていくことを決定し、実際に見るためにわざわざメイン論文のサイトのフロントページにビデオを- Diythemes.com
非常によく考えられているSEOの特徴 - 何がほとんどは細部へのこだわり、すべてのユーザーの親しみやすさと、ほとんどの場合私を感動。
MemberWingメンバーシップのプラグインは、できるだけ多くのSEOのジュースをプルする必要がある会員サイトのためにゼロから設計されました。 だから私はMemberWingでSEO強化の多数と完全さに注意の多くを支払った。 私自身のクライアントの多くは、使用するさまざまなテーマについて、求めているとSEOの深い内側から最適化されたので、よくあったテーマを持つことは、会員ポータル起業家のための優れたフィット感となります。

のSEOの力でMemberWingのSEOの力を組み合わせることで私のクライアントに順位機会のベストを与えるだろう。 だから私は論文を持って、一日のためにそれを果たした。

それはすべての点で優れテーマです。 それのナビゲーション部分は、しかし機能的な制限ビットです。 論文1.5から始まる+それは1レベルのみのメニューです。 私のいつもの欲求は非常に必要に応じてナビゲーションをカスタマイズできるようにすることです。 いくつかのサイトがほんの数ページを持って、他の多くは静的なページ+記事/記事の無数+カテゴリのたくさんのトンを持っている。
つまり理想的な世界で見栄えの良い階層的に編成されたユーザーフレンドリーなナビゲーションメニューを作成する機会を作ることは必要です。 バットオフ論文の右側には、格好良いナビゲーションがありますが、私はすべての論文ベースのWebサイトは、双子のように見ていることに気づいた。 ほとんどの人は、そのままにしておきますので、論文のナビゲーションメニューをカスタマイズすることは本当に容易ではない。 メニューでカテゴリの順序を変更したり、ページ間でそれらを配置する方法はありません。 そして再び、ネストされたメニュー構造を作成する機能が欠落しています。 だから私はそれについて何ができるかを確認することを決めた。
半ダースのメニュー/ナビゲーション関連のプラグインについて試した後に私は私の選択肢を設定するWordpressのナビゲーションリストのプラグインNAVT
NAVTプラグインは基本的に超豪華なと少し困難な把握非伝統的な管理インタフェースを使用してリストジェネレータ、順序付けられていない。 何がそれについての誤解を招くようなことはそれが実際に自分自身で手の込んだ探してメニューを作成しないことです。 あなたに視覚的にまとめるために能力を与える、と順不同のリストを生成 - - あなたの中の骨格のメニューになる人、それは仕事の最も困難な部分もを行います。 そして、あなたはあまりにも多くのメニューを作成することができます。 あなたは、ナビゲーションメニューにWordpressのもののすべての種類引っ張ることができる:ページ、投稿、記事、カテゴリ、ユーザーは、コードブロック、外部リンク、分周器、セパレーターと組み合わせると巣をして手配し、任意のツリー状の構造にそれらをカスタマイズするしたい。
あなたがHTMLの順不同のリストを結果のためNAVTが生成されます。 NAVTの第二の美しさは、それはあなたが有名なはJQueryベースのロジックを介して、任意のコードを変更することなく、自分のテーマにあなたの新しいメニューを挿入するために役立つということです! "私の新しいNAVTメニューでこの#の要素を置き換える":NAVTは、指定することができます。 #要素が現在のテーマによって生成されている既存のメニューまたはdiv要素のタグのパスのIDまたはクラスである可能性があります。 そうNAVTは、テーマコードに入るとそれが既によりも、より厄介なように強制することなくあなたのためのこの交換を行います。 心配しないでください - - そのちんぷんかんぷんのようなすべての音なら私はあなたがすぐにステップバイステップで案内されます。 皆のためのNAVTの困難な部分は、あなたのメニューを自分の実際のCSS +画像+ javascriptのコードを考え出す必要があることです。 そしてそれはどこで、どのようにこれらのファイルを統合し、このようなものが適切に一緒に接続して取得することを把握するのはあなた次第です。
誠実にjQueryを知らずに+いくつかのPHP + CSS + WordPressでまともな経験を持つことは - このことは、プルアップするのは難しいです。
私はWordpressのための最良のナビゲーションメニューの最善を構築する上で自由に弾丸とガイドの人類を噛まないように決めたので、喜んで私はこのようなものを少し知っている。 私はただのきれいな水平方向のCSSメニューのソースを見つけるために必要。 私が選んだダイナミックドライブのウェブサイトを彼らの最良の選択、デモとソースについて。

私は論文を研究し、NAVTプラグインで再生する日捧げた​​。 最後に私は誇らしげに私のWordpressの+論文ベースのサイト用のカスタム、柔軟性、SEO最適化、マルチレベル、ネストされたnagivati​​onの構造を作成した。

マルチレベル、ネストの機能のリスト用のメニュー
(あなたがこのようなものを好きにGOT):

  • プロフェッショナル、クリーンなルックアンドフィール。
  • MSIE 6,7、オペ​​ラ、サファリ、Firefoxの3.xでは、JavaScriptの両方でGoogle Chromeやjavascript以外のモードを含むすべての最新ブラウザのサポート。
  • javascript以外のブラウザのため正常にダウングレード。 このメニューは、(だけとはいえ、トップレベルのナビゲーションが表示されると、彼らは、JavaScriptによって行われるとしてもフライアウトはもちろん起こりません)視覚的に類似し、JavaScriptを無効のブラウザのためにも、正常に動作可能になります。
  • SEOフレンドリーな機能 - リストのメニューコードをHTML内に生成される順序なし。 Googleや他の検索エンジンのスパイダーは、インデックス、ナビゲーション構造にできるようにし、内側のページへのリンクがあります。
  • 無制限のネストレベルとサブレベルのサポート。
  • 任意の順序またはページ、ポスト(URIを定義したユーザーを介して)、カテゴリ、ユーザーは、カスタムコードブロックとメニュー内の外部リンクのサポート。
  • テキストだけでなく、画像ベースのメ​​ニュー要素のサポート。 (私はしかし、これらを試すには至っていない)。
  • メニューの構造と内容はNAVTの管理エリアを経由して視覚的に調整可能です。
  • コンパクト:ネストされたレベルのためのjQueryのベースのフライ。
  • 高速:メニューのjQueryはGoogleのサーバー(私はそれをローカルに引っ張っ代わりに同じことをする論文自体が好きだ)からロードされます。 これは、物事を少しスピードアップになります。
  • スケーラビリティ - メニューのこのタイプが編集可能で、どこのコーディングを必要とせずにNAVTプラグインの設定でいつでも設定可能。

私が使用し、ダイナミックドライブからこの優れたメニューをベースとしてポータル。 私はjavascriptのコードを少しカスタマイズするだけでなく、それが学位論文で動作させるためcustom_functions.phpにPHPのチャンクを含める必要がありました。 また、既存のページ、カテゴリおよび私のサイトからの記事の数は、メニュー構造を組み立てるために使用されていました。 あなたのサイトの仕様が異なるものになります - が、概念は同じになります。
そう進行させる、をしましょう​​。

設定するステップバイステップのインストラクションNAVTベースのマルチレベル、カスタマイズ可能な、入れ子になった、SEOフレンドリーを
と単なる格好いい論文のテーマ

  1. Wordpressの管理パネルにアクセスしてください。 プラグイン - >新規追加、"navt"を検索してください。 プラグインが表示されます。 [インストール]は、[今すぐインストール]、"プラグインを有効にします"。
  2. [ツール] - > [NAVTリストは、内部では"ナビゲーショングループ"エリアは、"グループ名"を見つけると入力してください:フィールドの"MENU1"、を押して[作成]ボタンをクリック。 "MENU1"長方形の領域が作成さてしまった。
    この"MENU1"エリアは、メニューの建設のための主な遊び場となります。 あなたのメニューの要素をドラッグし、ここにドロップすることでしょう。
  3. に"資産"エリアには、"他の"リストボックスを見つけて、"ホーム"の選択をクリックしてください。 "ホーム"thingieは、"未割り当て"領域の内側に表示されます。 奇妙な、え? 限り、それが動作するように心配ない、 - そしてそれは私達の意志。
  4. "MENU1"長方形の領域に"資産"エリアから"ホーム"thingieをドラッグします。 それは、メニューの"ホーム"項目になります。
    • "ページ"エリアから、一部のページのためだけでなく、"カテゴリー"エリアでのカテゴリのための手順3〜4を繰り返します。 あなたが"MENU1"四角形の中に、メニュー上にある任意の他のアイテムをドラッグします。 あなたがページ、カテゴリ、ユーザーとそのような"リストの分周器"と"コードブロック"のようないくつかのカスタム要素をクリックすることができます。 コー​​ドブロックは、メニュー内のカスタムスニペットを追加するクールな方法です。
    • あなたはそれらの順序を変更する"MENU1"エリア内のメニュー項目をドラッグできます。
    • あなたは"<"と">"矢印で各メニュー項目の階層的位置を調整することができる。
    • 各メニュー項目のテキスト名をクリックすると、 - この項目のための心の遠くなるような余分なカスタマイズダイアログを開きます。 私は主にデフォルト値を使用しましたが、技術的には、狂ったイメージベースのメ​​ニューの選択肢を作り始めると、それにHTMLコードのチャンクを追加することができます。 しかし、注意深く作業を進める。
    • 他の"サブ子どもたち"のための"親"となるlinkless unclikableサブメニューの場合、私は"コードブロック"タイプを使用していました。 たとえば、"メニュー項目のエイリアス"="MemberWing"のためにとのための私が入力されたようなコードブロックの項目をカスタマイズするときに"コードブロックを入力してください:"="<a href='#'> MemberWing </ a>"に。 HREF ="#"を持つことは、それがクリック可能ではないことが、有効な"親"メニューの選択肢として機能します。
  5. ほぼ完成したように私のNAVT"MENU1"ビルド構造が見える方法は次のとおりです。
    navt_building_icon
  6. 初期の建物を完了してから、メニュー構造をカスタマイズする"歯車"アイコンをクリックします。
    navt_customize_menu
  7. オプション、ディスプレイ、CSS、テーマ:それは、4つのタブのあるダイアログを開きます。
    1. "オプション"タブに移動し、すべてがオフになっていることを確認し、"グループ名は"と言う:"MENU1"
    2. タブの"表示"と"でナビゲーションを表示グループ..."で確認し、すべてを行うエリアは、[X]をチェックされているに進みます。 デフォルトで残りを残す。
    3. "CSS"タブに移動し、(X)"CSSクラスを適用しない"ラジオボタンを選択します。
    4. "テーマ"タブに移動し、そのようにそれを埋める:
      navt_configuration_theme_tab_icon
      "前にタグを追加..."エリアは、このコードに挿入します。
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      "の後にタグを追加..."エリアをこのコードに挿入します。
      <br style='clear: left' /></div>
    5. を押して、[保存/終了]ボタンを
  8. この時点のメニューでNAVTプラグインオプションの中から建物は完了です。
    今それはのために少し調整を行うための時間です 、それを準備する。 そのためにはいくつかのカスタムファイルを追加する必要があります - CSSやJavaScriptメニューに属しており、アップデートの論文"custom_functions.phpを
  9. ここにファイルの完全なセットをダウンロードしてください
  10. アーカイブを解凍します。 あなたのカスタマイズを使用してcustom_functions.phpを更新した場合 - あなたは私のものとそれらをマージする必要があります。 私はあなたにそれを任せる。
    あなたがそれを触れていない場合は - 私にそれを上書きすること自由に感じなさい。 ご注意:私はウェブサイトのヘッダー(既定値は上記の場合)の下にメニューを配置することが好ましい - 私の調整が同様にこのプリファレンスを含むように。
  11. あなたの下にあるすべてのサブディレクトリーとファイルを含むアーカイブをアップロードこのように'custom'ディレクトリを、。
    .../themes/THESIS-DIR/custom/custom_functions.php
    .../themes/THESIS-DIR/custom/jquerycssmenu/...

    私はのcustom.cssを触れていない - 私はのcustom.css内部の混乱の発生を防ぐために、自分の場所の下にメニュー固有のCSSを維持することを好む
  12. この時点であなたのウェブサイトをリロードし、新しい美しい新しいマルチレベル、ネストされた、SEO最適化されたメニューが表示されることがあります。
  13. あなたはいつもの設定をNAVTし、より多くの選択肢を使用してメニューをカスタマイズしたり、何かを再配置に戻ることがあります。 それは、自動的にライブサイトに反映されます。

前方の道路...

このチュートリアルでは、メニューの一種の創造的な例が含まれています。 私は別のものでプレイ - ちょうど色のメニューは次のようになりますどのように暗い参照する。

Thesis theme - multilevel nested CSS menu - dark palette

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

私はそれがかなりいいと思う。 で入手可能な多くのナビゲーションのサンプルがあります。 ダイナミックドライブは -それらのすべては、いくつかの労力で論文やその他のワードプレスのテーマをカスタマイズすることが可能です。

Dynamic Drive Horizontal Menus

ダイナミックドライブ水平メニュー

私はあなたがこのチュートリアルでは有益と便利だろうと思います。 私が言ったように、それは論文のためにこれらのメニューのいずれかをカスタマイズすることができます - 時間とそれを実現するために意欲を与えていること。

私は契約に基づいてあなたのためにこの作業を行うことができます。 ただ、あなたが好むメニューを選んで私に連絡し、私はあなたのウェブサイトのコードとの指示にうまくいく。

20ドル

:このための最善の解決策 - そしてもちろん、あなたは最高のスーパーSEO最適化されたプレミアムワードプレスのメンバーシップのポータルを構築するためにしている場合
論文のテーマ + MemberWingメンバーシップのプラグイン + 自己ホスト型Wordpressのもちろん。

comments } { 15コメント }

プレミアムポスト3

2009年7月5日

これはプレミアムポスト3の無料ティーザーです。
この記事では、組み合わせてコンテンツが含まれています:最初の部分はゴールドメンバーに表示されている、記事全体は、プラチナメンバーのみ閲覧可能です。
ゴールドメンバー最初の(ユーザ名/パスワード=金/金)としてログインしようとすると - あなたはより多くのコンテンツが表示されます。
プラチナメンバーとして...して、ログオフし、再度ログイン(ユーザ名/ [...]

記事全文を読む→

プレミアムポスト2

2009年7月5日

これはプレミアムポスト2の無料ティーザーです。 残りはゴールドとメンバーだけのため表示されます。
ヒント - ゴールドメンバーのログイン/パスワード=ゴールド/ゴールド

この記事の残りの部分では、唯一のプレミアムメンバーに公開されています。
ログインまたはメンバーになる

記事全文を読む→

プレミアムポスト1

2009年7月5日

これはMemberWing - Xのデモ記事です。 とMemberWing - Xこの記事は、2.95ドルのシングル価格で、または"ゴールドメンバーシップ"プログラムに加入することによって購入されています。
そう、これはプレミアムポスト1の無料ティーザーです。 この記事の残りはたったの$ 2.95または"ゴールドメンバーシップ"に加入し、それを購入した会員の目に見えるです。
ヒント[...]

記事全文を読む→

最高のSEOの会員サイトのための論文のテーマとメンバーシップサイトのプラグインMemberWing

2009年7月5日

MemberWingは、SEO最適化された会員のポータル用に特別にデザインされたWordPressの会員制サイトのプラグインです。 その柔軟な刃先交換式お誘いで、Googleは第一のサポートは無料、標準、デジタルコンテンツとPromoFusion権限にダウンロードの保護をクリックして - それはあなたのメンバーシップサイトスピーディー索引付けおよびより高いランキングを保証します。
他の会員制サイトのソフトウェアは完全に[...]へのアクセスを無効にするのが好きながら、

記事全文を読む→