2009年7月10日にgesmanによって
完全な垂直方向のメニューのための探求...
このチュートリアルのパート1では、水平方向のマルチレベルのネストしたメニュー構築のステップのプロセスを追って説明したWordPressの論文のテーマを 。 第2部では、この機能を強化する上で続行されます。 ここでは、水平方向のナビゲーションメニューの "暗い"バージョンを追加し、私はどのように "明るい"と "暗い"のバージョンを切り替えることをお教えします。 パート2はパート1のスーパーセットです。 それは+パート1からすべてを含む、よりクールなものを追加します。
私が提示したかった主なアイデアは、垂直メニューを追加している論文のテーマ （一般的にWordPressへ）。 私は無制限のネスティングレベルを作成できるようになる本当に柔軟な、SEOフレンドリーなマルチブラウザ互換性のある縦のメニューを探していました。
WEBは、件名にページのトンを持っていますが、私はすべてのこれらのサンプルを試し始めたときに - 彼らはどちらか離れて落ち、壊れた、レベルの数は限られをサポートしていたり、ゲイツにmisbehaved +バルマーのjunksplorer 6。 最後に私が試したと信頼に戻ったダイナミック·ドライブのメニューの垂直サンプルは私の厳しい要件に合った良いケースであることが証明として。 私はそれが論文のモデルに適合することを確認しても著しく、それらを変更する必要がありました。
完璧の追求は続け...
私は時間の検索、組み立て、テスト、修正、研磨および垂直方向のメニューのCSSを調整します。jsのコードと3月4日約16時間を費やして、それがMSIE 6で動作するようになって過ごしました。
とにかく、私は最終的な結果に満足しました。 結果、垂直ナビゲーション·メニューには、持ってすべて同じ利点水平メニューが持っているし。
垂直方向のメニューを追加する能力を有すると、Web上のポータルの約70〜80％に非常に重要です。 水平方向のメニューには、多くのメニューの選択肢を収容するために "スペース"を限られているが、垂直方向のメニューにはこの制限はありませんと非常に役立つだろう。 だからここに私達は行く。
それを実現するための手順の多くはすでにに記載されているチュートリアルのパート1 、これはちょっと短い1つのためにそれを行いますので、しかし、はるかに機能が豊富な結果が得られます。
だからここに行く：
WordPressや論文のテーマのためのSEOフレンドリー、垂直、マルチレベル、階層的にネストされたメニューを構築しています。 ステップバイステップ
（...何を考えられなかった...）
- インストールのexec PHPプラグインを 、それをアクティブにします。 私は垂直方向のメニューのHTMLコードを出力するには、テキストウィジェットの内部でPHPを使用するので、我々はそれをする必要があります。
- から6 -ステップ1を行うチュートリアルのパート1 。 基本的には、インストールとアクティブ化NAVTプラグインを使用する+視覚的にメニューを構築する必要があります。 メニューグループ名は "MENU1"であることを確認してください。 この名前はcustom_functions.phpにハードコードされています
- それのプロパティを編集するには、 "MENU1"グループの "歯車"アイコンをクリックしてください。
- パート1のチュートリアルの7.1 -7.3は、 "オプション"、 "表示"と "CSS"タブの設定を行う手順に従います。
- 今、このダイアログの "テーマ"タブをクリックします。 （手順1に従ってきた場合）私たちはそこにいくつかの設定を上書きします。 これはokです - あなたは何を失うことはありません - しかし、私はステップ1からいくつかのコードを変更したため、これらの変更が必要とされている。
このダイアログに入力する必要がありますどのようにここでは次のとおりです。 - 内部の "テーマのxpath："エリアには、このコードを（それはこれらのクラスを持つ任意のタグを置き換えるために命じる）を入力します。
.jquerycssmenu, .jqueryslidemenu - "置換"に設定した "アクション"
- 内側からこのコードを入力エリア "ナビゲーショングループの前にタグを追加"
<div class='jquerycssmenu' style='margin-top:5px;'> - 内側の領域 "を追加タグナビゲーショングループの後に"このコードを入力します。
<br style='clear: left' /></div> - [閉じる/保存する]ボタンをクリックしてください。
- 今WordPressの管理パネルに行く - >外観 - >ウィジェット。
- 右側の "サイドバー1"エリアに "テキスト"ウィジェット（ビッグ "利用できるウィジェット"エリアから）をドラッグします。 我々は、私たちは、垂直メニューを具体化するのに役立ちますテキストウィジェットにコードを追加する予定です。
注：私はあなたの存在の "サイドバー1"を持っている想定しています。 論文のオプションは、あなたがそれをオフにすることができます - しかし、このチュートリアルのためにそれはしてみましょう。 - 一度ドラッグして、このウィジェットを落とした - それは、花（私はMSIEの闘争が終わった今、ロマンチックな感じている）のように開きます。
- "タイトル"領域で "世界最高の垂直方向のメニュー"を入力してください...さて、あなたの創造性を自由に使って - 、そのテキストは、新たに生まれた垂直方向のメニューの上に移動します。
- テキストの大きな領域で - この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;
?> - を押して[保存]ボタンをクリックし、 "閉じる"リンクをクリックします。
- ダウンロードここでファイルのセットを更新 。
このアーカイブには含まれています。
- "明るい"水平メニューコードの更新版
- 水平方向のメニューの "ダーク"バージョン
- 垂直方向のメニューコード
- custom_functions.phpのアップデートバージョン
- 今、あなたはこのアーカイブを解凍し、あなたの論文のテーマの "カスタム"ディレクトリにアップロードする必要があります。
注：custom_functions.php内の任意のカスタマイズを行っている場合 - あなたはそれらをマージする必要があるでしょう。 されていない場合は - 私のバージョンで上書きすること自由に感じなさい。 - 出来上がり！ 今すぐあなたのウェブサイトをリロードし、左サイドバーに同じ "明るい"水平メニュー+格好いい垂直メニューが表示される場合があります。
- ボーナスタスク： "暗い"カラースキームに "明るい"水平方向のメニューを変更してみましょう。
- 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
基本的に我々は1つの行をコメントアウトし、もう一方のコメントを解除しています。 - 今WordPressの管理 - >ツール - > NAVTリストに移動して、あなたの "MENU1"グループのプロパティを編集するには、上記の "歯車"アイコンをクリックします。
- "テーマ"タブをクリックします。
- 内側からこのコードを入力エリア "ナビゲーショングループの前にタグを追加"
<div class='jqueryslidemenu' style='margin-top:5px;'> - 今すぐ予約 - あなたのページをリロードして - そしてあなたの主な水平方向のナビゲーションメニューには "魔法のように"暗い、のようなものになった：
論文のテーマ - マルチレベルのネストしたCSSメニュー - 暗いパレット
ダークカラーパレットは明るい色よりも、特定のサイトに適している可能性があります。 だから今、あなたの人生の選択の自由があります！
- "明るい"カラースキームに戻って取得するには - ちょうど "ボーナス"上記の手順を元に戻す。
- 結論：
私は論文のテーマを愛し、私はWordPressを愛し、私は我々のポータルにまともなナビゲーションメニューを追加する方法を持っているという事実を愛する。
20ドル
お楽しみください！
グレブEsman
2009年7月8日にgesmanによって
完璧なメニューのクエスト...
このチュートリアルのパート1です。
このチュートリアルのパート2は、水平方向のいずれかの垂直方向のメニュー+ダークカラーパレットを構築する方法を教えて
私が手にすることを決めた論文のテーマを私のクライアントのいずれかの論文と私の間に互換性の問題についての私を知らせたので、 WordPressの会員サイトのプラグイン MemberWing。 私はそれを固定し、論文をよく見てすることを決定し、実際に見るためにわざわざメイン論文サイトのフロントページでビデオを- Diythemes.com 。
非常によくだと考えられているSEOの特徴 - 何が最も、詳細、使いやすさと、すべてのほとんどに注目です。感動しました。
MemberWing会員プラグインは、できるだけ多くのSEOのジュースをプルする必要があるでしょうメンバーシップサイトに一から設計されています。 だから私は、SEO機能強化の多くに注意の多くを支払ったとMemberWingの完成度。 自分のクライアントの多くが使用するさまざまなテーマについての質問なども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プラグインで再生する日を捧げた。 最後に私は誇らしげに私のワードプレス+論文ベースのサイト用のカスタム、柔軟な、SEO最適化、マルチレベル、ネストされたnagivation構造を作成しました。
マルチレベル、ネストされた機能のリストWordPressのナビゲーション論文のテーマのメニュー
（あなたがこのようなものを好きにGOT）：
- きれいで、プロのルックアンドフィール。
- JavaScriptとjavascript以外のモードの両方で、MSIE 6,7、オペラ、サファリ、Firefoxの3.xでは、Google Chromeを含むすべての近代的なブラウザをサポートしています。
- javascript以外のブラウザ用の優雅にダウングレード。 あなたメニューは、使用可能になります視覚的に類似しており、JavaScriptを無効のブラウザでも仕事では（唯一のトップレベルのナビゲーションとはいえ見えるようになり、彼らは、JavaScriptによって行われたようにはフライアウトはもちろん起こりません）。
- SEOフレンドリーな機能 - リストのメニューコードをHTML内で生成される順序付けられていない。 Googleやその他検索エンジンのスパイダーは、インデックス、ナビゲーション構造を、内側のページへのリンクを見つけることができるようになります。
- 無制限のネスティングレベルとサブレベルをサポートしています。
- 任意の順序またはページのサポート、ポスト（URIを定義したユーザーを介して）、カテゴリー、ユーザー、カスタムコードブロック、およびメニュー内の外部リンク。
- のサポート、テキストだけでなく、画像ベースのメニュー要素として。 （私はしかし、これらを試して、まだ持っている）。
- メニューの構造と内容はNAVTの管理領域を経由して視覚的に調整可能です。
- コンパクト：ネストされたレベルのためのjQueryベースのフライアウト。
- 高速：メニューのjQueryをGoogleのサーバー（私はそれをローカルに引っ張っての代わりに同じように論文自体を愛するでしょう）からロードされます。 これは物事のビットをスピードアップするでしょう。
- スケーラビリティ - メニューこのタイプの編集可能な、どこのコーディングを必要とせずNAVTプラグインの設定を介していつでも設定可能です。
私が使用し、ダイナミックドライブから優れたメニューをベースとしてポータル。 私はjavascriptのコードを少しカスタマイズするだけでなく、それが論文で動作させるためにcustom_functions.phpにPHPのチャンクを含める必要がありました。 また、私のサイトから既存のページ、カテゴリと記事の数は、メニュー構造を組み立てるために使用されました。 あなたのサイトの仕様が異なります - しかし、概念は同じになります。
そう進みましょう、我々はしなければならない？
セットアップする手順について説明バイステップNAVT 、ベース、ネストされたカスタマイズ可能な、マルチレベルのSEOフレンドリー
と単純に見栄えのWordPress用のナビゲーション·メニューと論文のテーマ
- WordPressの管理パネルに移動します。 プラグイン - >新規追加、 "NAVT"を検索してください。 プラグインが表示されます。 [インストール]をクリックし、 "プラグインを有効にします" [今すぐインストール]。
- [ツール] - > [NAVTリスト "ナビゲーショングループ"領域内の "グループ名"を見つけて、次のコマンドを入力します。フィールドに "MENU1"を押して[作成]ボタンをクリックします。 "MENU1"矩形領域が作成されてしまった。
この "MENU1"エリアは、メニュー構造の主な遊び場となります。 あなたのメニュー要素をドラッグし、ここでドロップされます。 - "資産"エリアで "その他"のリストボックスを見つけて、 "ホーム"の選択をクリックしてください。 "ホーム" thingieは、 "未割り当て"領域の内側に表示されます。 奇妙な、え？ ないそれが動作する限り心配、 - そしてそれは私達の意志。
- "MENU1"矩形領域に "資産"エリアから "ホーム" thingieをドラッグします。 それはメニューの "ホーム"の項目になります。
- "ページ"領域と同様に、 "カテゴリー"エリア内のカテゴリのからいくつかのページのステップ3-4を繰り返します。 あなたは "MENU1"矩形の内側にメニュー上にある任意の他のアイテムをドラッグします。 あなたがページ、カテゴリ、ユーザー、およびそのような "リスト圧器"と "コードブロック"などのいくつかのカスタム要素をクリックしてください可能性があります。 コードブロックは、メニュー内のカスタムスニペットを追加するクールな方法です。
- あなたはそれらの順序を変更するには、 "MENU1"領域内のメニュー項目をドラッグすることができます。
- あなたは "<"と ">"矢印で各メニュー項目の階層位置を調整することができる。
- 各メニュー項目のテキスト名をクリックすると、 - このアイテムの心遠くなるような余分なカスタマイズダイアログを開きます。 私は主にデフォルト値を使用されるが、技術的には夢中になると、イメージベースのメニューの選択肢を作り始めると、そこにHTMLコードのチャンクを追加することができます。 しかし注意して進みます。
- 他の "サブ子どもたち"の "親"となるlinkless unclikableサブメニューは、私は "コードブロック"タイプを使用していました。 "メニュー項目の別名" = "MemberWing"にとのために私が入ったようなコード·ブロックの項目をカスタマイズするときに、例えば "コードブロックを入力してください：" = "<a href='#'> MemberWing </ a>"を。 HREF = "＃"は 、それがクリックできないになることが、有効な"親"メニューの選択肢として機能します。
- ここでは私のNAVT "MENU1"ビルド構造がほぼ完成のように見えた方法は次のとおりです。
- 初期の建物を完了してから、メニュー構造をカスタマイズするには、 "歯車"アイコンをクリックしてください。
- オプション、ディスプレイ、CSS、テーマ：これは、4つのタブを持つダイアログを開きます。
- "オプション"タブに移動し、すべてがオフになっていることを確認し、 "グループ名"を作ると言う： "MENU1"
- "タブを表示"と "で表示するナビゲーション·グループ..."で必ずすべてを行う領域は[x]はチェックされているに進みます。 デフォルトでは、残りのままにしておきます。
- "CSS"タブに移動し、ラジオボタン（x）は "CSSクラスを適用しない"を選択してください。
- "テーマ"タブに移動し、そのようにそれを記入してください：
"の前にタグを追加..."領域にこのコードを挿入：
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
"の後にタグを追加..."領域にこのコードを挿入：
<br style='clear: left' /></div> - を押して[閉じる/保存]ボタン
- NAVTプラグインオプションの中からこの時点でメニューの建物で完了です。
今それは準備する論文のテーマのために少し調整を行うための時間です。 CSSとJavaScriptメニューや更新テーゼ "custom_functions.phpに属しています - そのために我々はいくつかのカスタムファイルを追加する必要があります。 - ここでファイルの完全なセットをダウンロードします 。
- アーカイブを解凍します。 あなたのカスタマイズを使用してcustom_functions.phpを更新した場合 - あなたは私のものでそれらをマージする必要があります。 私はあなたにそれを残しておきます。
あなたはそれに触れていない場合は - 私でそれを上書きすること自由に感じなさい。 注意してください：私はウェブサイトのヘッダー（デフォルトは以上である）の下にメニューを配置することが好ましい - 私の調整だけでなく、このプリファレンスが含まれていようにします。 - このようにあなたの論文のテーマ 'custom'ディレクトリの下にあるすべてのサブディレクトリとファイルを含むアーカイブをアップロードします。
.../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
私はのcustom.cssに触れていない - 私はのcustom.css内の混乱を作成しないようにするための独自の場所の下にあるメニュー固有のCSSを維持することを好む - この時点で、あなたのウェブサイトをリロードし、新しい美しい新しいマルチレベル、ネストされた、SEO最適化されたメニューが表示されることがあります。
- あなたは、常に設定をNAVTと多くの選択肢を使用してメニューをカスタマイズしたり、何かを再配置するために戻ることができます。 それは自動的にライブサイトに反映されます。
前方の道路...
このチュートリアルでは、メニューの1つのタイプの創造的な例が含まれています。 私は別のものと演奏 - ちょうど暗い色のメニューは次のようになりますどのように見て：
論文のテーマ - マルチレベルのネストしたCSSメニュー - 暗いパレット
私はそれはかなりいいと思います。 で利用可能な多くのナビゲーションのサンプルがあり、ダイナミックドライブは -それらのすべては、いくつかの労力で論文や他のWordPressのテーマをカスタマイズすることが可能です。
ダイナミックドライブの水平方向のメニュー
私は、あなたがこのチュートリアルでは、有益かつ有用見つけることを願っています。 私が言ったように、それが論文のためにこれらのメニューのいずれかをカスタマイズすることが可能である - 時間とそれを実現する願望を与えられている。
私は契約に基づいてあなたのためにこの作業を行うことができます。 ただ、好きなメニューを選んで私に連絡し 、私はあなたのウェブサイトのためのコードと手順で動作します。
20ドル
そしてもちろんあなたは、スーパーSEO最適化されたプレミアムWordpressの会員ポータル構築までなら - このための最適なソリューションを。
論文のテーマ + MemberWingメンバーシップのプラグイン + セルフホストされているWordPressのコース。
