論文のテーマ - マルチレベル、入れ子になった、SEOフレンドリーなメニュー - チュートリアル

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

gesmanによって、2009年7月8日

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

これはチュートリアルのパート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の構造を作成した。

のためのマルチレベル、ネストされたWordpressのナビゲーションメニューの機能のリスト
(あなたがこのようなものを好きに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フレンドリーを
とWordpressとただシンプルに格好いいナビゲーションメニュー論文のテーマ

  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のもちろん。

コメントを残す

前の記事:

次の記事: