論文のテーマ- 、マルチレベルのネストは、SEOフレンドリなメニュー-チュートリアル

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

gesman 2009年7月8日

クエスト完璧なメニューを...

これは、パート1のチュートリアルです
パート2はこのチュートリアルのどのように垂直方向のメニューを作成する+ダークカラーパレットの水平方向のいずれかを教えて

これは私のクライアントの論文と私のwordpressの会員制サイトのプラグイン MemberWingの間に互換性の問題について私私は修士論文のテーマを取得する、決定した。 私は、それを修正してや論文でよく見て、実際に主な論文サイトのフロントページでビデオを見て- Diythemes.com面倒を決めた。
どのような私は、これも考えているほとんどの詳細は、ユーザーの親しみやすさと、すべての大部分に注目して- SEOの機能が感銘を受けました。
MemberWing会員プラグ地面を会員サイトからは、できるだけ多くのSEOのジュースを引く必要が設計されました。 だから私はSEOの強化とMemberWingで完成度の多数への注意の多くを支払った。 自分のクライアントの多くは、さまざまなテーマについて、そのようなSEOの心の奥底からの会員のための優れたフィットポータルの起業家になるに最適化されたことのテーマを使用するように求めている。

のSEOの力を私のクライアントには、ランク付けの機会をベストを尽くすつもりだMemberWingのSEOの力を組み合わせる。 だから、論文だ、それを1日でプレイした。

それはあらゆる面で優秀なテーマです。 それのナビゲーション部分は少し機能に限られている。 論文1.5最低料金+ 1つのレベルのメニューのみです。 できるだけ必要に応じてナビゲーションをカスタマイズできるように私のいつもの欲求です。 一部のサイトでは、多くの他の静的なページがたくさんある+はいくつかのページがあるカテゴリの記事を無数/記事+たくさん。
そのための理想的な世界はチャンスいい階層的に編成探して、ユーザーフレンドリーなナビゲーションメニューを作成すること必要があります。 バットをオフに論文を右さんのナビゲーションが、私はすべての論文ベースのWebサイトの双子のように見えることに気付いた良いのだが。 カスタマイズ論文のナビゲーションメニューは本当に多くの人々と同様ですが、休暇は簡単です。 そこは、メニュー内のカテゴリの順序を変更したり、ページの間に位置する方法はありません。 そして再び、能力をネストされたメニューの構造を作成するために足りない部分です。 そこで私はそれについて行われるかを確認することを決めた。
約半ダースのメニュー/ナビゲーション私はWordpressのナビゲーション一覧プラグインNAVT私の選択は、関連するインしようとした。
NAVTプラグイン- -非伝統的管理インターフェイスの図には、スーパー空想とは少し難しいと本質的に箇条書きで生成されます。 何それについて実際にはそれ自体が空想さんのメニューは作成されません誤解を招きやすい。 それも仕事の最大の難所は-あなたの能力視覚的にまとめることができますし、順序リストを生成する-あなたのメニューのスケルトンになる予定です。 そして、あなたも多くのメニューを作成することがあります。 場合は、ナビゲーションメニューにWordpressのもののすべての種類のプルダウンがあります:ページ、投稿、記事、カテゴリ、ユーザーは、コードブロックは、外部リンク、仕切り、セパレータとミックスと一致し、巣を手配したり、任意のツリーでそれらをカスタマイズするような構造を欲しい。
ためのHTMLの順不同リストの結果NAVTを生成します。 NAVTの2番目の美しさは、あなたのテーマに有名なjQueryを介してロジックをベースに、新しいメニューを挿入するのに役立ちます必要がある任意のコードを変更することなく! NAVTを指定することができます:"私の新しいNAVTメニューでは、この#要素が置き換えられます"。 #要素のidまたは既存のメニューやお客様の現在のテーマによって生成されているdiv要素のタグのパスのクラスになることができます。 だからNAVTテーマのコードに移動し、それをさらに厄介なことよりも、すでにされ強制することなくあなたのため、この置換はありません。 場合は、ちんぷんかんぷんな話のように、すべてのサウンド-心配しないでください-私はあなたのステップ、すぐに手順を追って説明します。 誰にとってもNAVTの挑戦的な部分は、実際のCSSと+画像+ javascriptコードをあなたのメニューを自分で用意する必要がありますです。 そしてそれはあなたにどこで、どのようにこれらのファイルを統合し、このようなものが正しく一緒に接続することを把握する次第です。
よろしくお願いいたします。Wordpressと+いくつかのPHP + CSSの+がまともな経験-このことをjQueryを知らずにプルするのは難しいです。
喜んで私は少しので、私は決定の自由へのWordpressのための最適なナビゲーションメニューの最高の建物内には新幹線やガイド、人類をかむこの原料を知っている。 私はいくつかの見栄えの良い水平CSSメニューのソースを見つける必要がありました。 私たちの最高の選択を、デモ、ソースの動的なドライブのウェブサイトを選んだ。

私は毎日論文および修士論文NAVTプラグで遊ぶの研究に専念。 終わりに私は誇らしげに、カスタム、柔軟性は、SEO最適化された、私のWordpress +論文ベースのサイトのため、マルチレベルのネストされたnagivation構造を作成しました。

は、マルチレベルのネストされたWordpressのナビゲーションメニューの機能の一覧
(この大好きなんですが)を獲得した:

  • プロフェッショナルで、きれいに見えると感じています。
  • MSIE 6,7と、Operaは、Safari、Firefoxは3.xでは、Google Chromeの両方のJavaScriptと非ジャバスクリプトモードを含むすべての最新ブラウザのサポート。
  • 正常以外のdowngradable javascriptをブラウザ。 現在のメニュー使用され、視覚的に似て、さらにはJavaScriptが無効のブラウザでの作業(とはいえ唯一のトップレベルのナビゲーションが表示されるされるとflyoutsには、javascriptによって作られて当然の状態になります)。
  • SEOのフレンドリーな機能-順不同のリスト]メニューの[HTMLコード内で生成されます。 Googleなどの検索エンジンのスパイダーをインデックスにナビゲーション構造にすることができますを見つけるの内部ページにリンクします。
  • 無限の入れ子のレベルおよびサブレベルのサポート。
  • 任意の順序やページの記事のサポートは、ユーザーのURI defined()を介して、カテゴリ、ユーザーは、カスタムコードをブロックし、メニュー内の外部へのリンク。
  • テキストのサポートだけでなく、イメージメニューの要素に基づく。 (私はまだ、これらも試して)している。
  • メニューの構造と内容を視覚的にNAVT管理エリアを介して調整可能です。
  • コンパクト:ネストされたレベルのjQueryをベースflyouts。
  • 高速:jQueryのメニューにGoogleのサーバーから読み込まれます(私の代わりに、ローカルに引くのも同じように)学位論文自分自身の愛と思います。 これは少しスピードアップします。
  • スケーラビリティ-メニューのこのタイプは編集され、設定可能なNAVTプラグインの設定を介して、いつでもどこでもコーディングのいずれかを必要とせず。

私の拠点としてダイナミックドライブポータルからこの豊富なメニューを使用する。 私だけでなく、custom_functions.phpに論文とそれを動作させるためにPHPの塊を含むビットのjavascriptコードをカスタマイズしていた。 また、中古の数は、既存のページ、カテゴリや投稿サイトからのメニュー構造を組み立てるために使用された。 あなたのサイトに具体異なるだろう-しかし、概念は同じになります。
だから聞かせ、ものに進む?

セットアップNAVTする手順をステップ、カスタマイズ可能、マルチレベルのネストされたSEOのフレンドリーなベース
ちょうど平原さんのテーマは、Wordpress、 論文のナビゲーションメニューのクール

  1. Wordpressの管理者パネルに移動します。 プラグイン"navt"に、新しい検索を追加"。 プラグが表示されます。 をクリックして[インストール]、[今すぐインストール]、"アクティブ化プラグイン"。
  2. [ツール]"NAVTリスト、"ナビゲーションGroup"の領域の中の""グループ名を見つけると入力します:"menu1"フィールドに、キーを押します[作成]ボタンを押します。 "menu1"矩形領域を作成得た。
    これは、"menu1"領域のメニュー構築のための主な遊び場になります。 あなたがドラッグされますとここにあなたのメニューの要素をドロップします。
  3. "資産"の領域では"ホーム"の選択"で他の"リストボックスをクリックして下さい。 "ホーム"thingie内の"未割り当て"領域が表示されます。 、ええ不可思議な? 心配ない限り、その作品-そしてそれが私たちにとって。
  4. "資産"の領域からに""四角形の領域menu1、この"ホーム"thingieにドラッグします。 それは"ホーム"の項目がメニューになります。
    • "カテゴリ"エリアにあるページ"面積"からいくつかのページの手順を繰り返します。3-4、同様のカテゴリ。 あなたのメニューmenu1"内部"の矩形に応じて他のアイテムをドラッグします。 ページにあなたがクリックすると、"コードブロック"リスト圧器"など"としての種類、ユーザー、およびいくつかのカスタム要素。 コードブロックですクールな方法は、メニュー内のカスタムスニペットを追加します。
    • あなたmenu1"内の順序を並べ替えるに"エリアのメニュー項目をドラッグすることがあります。
    • あなたが"と、各メニュー項目の階層の位置を調整することがあります""と"""矢印。
    • 各メニュー項目のテキストの名前をクリックすると、 -この品物を心遠くなるような余分なカスタマイズ]ダイアログが開きます。 私はほとんどがデフォルトで使用される技術的に夢中になることができますし、イメージを作るメニューの選択肢をベースとそれにHTMLコードの塊を追加するを起動します。 注意しても進みます。
    • 他の"サブ"親"子供"私""タイプのコードブロックを使用するとなるlinkless unclikableサブください。 たとえば、私がメニュー項目のエイリアス"の"="MemberWing"と"コードブロックを入力して入力したようなコードブロックの項目をカスタマイズする:"="の<a href='#'>"MemberWing /""。 のhref持つ="#"はクリックしないことだろうが、有効な"親"メニューの選択肢として機能する。
  5. ここでどのように私のNAVT'menu1'構造体の構築はほぼ完了したように見えた:
    navt_building_icon
  6. とし、"ギア"のアイコンをあなたのメニュー構造のカスタマイズをクリックして、初期の建物仕上げ:
    navt_customize_menu
  7. これは4つのタブとダイアログが開きます:オプション、ディスプレイ、CSSを、テーマ。
    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とは、メニューに属しており、論文'custom_functions.phpを更新ジャバスクリプトが必要
  9. ダウンロードしたファイルをここで設定を完了
  10. 解凍アーカイブ。 あなたのカスタマイズを使用してcustom_functions.phpを更新しました-あなたが私のものとそれらをマージする必要があります。 私はあなたに任せるよ。
    がある場合はそれに触れていない-私はそれを上書きする自由を感じる。 ご注意:私は(デフォルトは、上記されているウェブサイトのヘッダーの下のメニューの位置を推奨) -ので、私の調整だけでなく、この設定に含まれます。
  11. このようなすべてのサブディレクトリやファイルをあなたの 'カスタム'ディレクトリの下などをアップロードするアーカイブを、:
    .../themes/THESIS-DIR/custom/custom_functions.php
    .../themes/THESIS-DIR/custom/jquerycssmenu/...

    私custom.cssに触れていない-私はメニューにしておきたい固有のCSS独自の場所の下にcustom.css内の混乱を避けるために
  12. この時点で、あなたのウェブサイトをリロード可能性がありますし、新しい、美しい、新しい、マルチレベルのネストは、SEO最適化されたメニューを参照してください。
  13. いつでも戻っNAVTの設定に行くかもしれないし、より多くの選択肢か何かの位置を使用してメニューをカスタマイズします。 これはライブのサイトに自動的に反映されます。

前途...

このチュートリアルでは、メニューの1つのタイプの創造的な例に含まれます。もう1人でプレイ-と同じように見えるがどうなるか、暗い色メニューを表示する:

Thesis theme - multilevel nested CSS menu - dark palette

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

私はそれはかなりナイスだと思う。 修士論文は、いくつかの努力は、他のWordpressのテーマのためにカスタマイズすることが可能ですが、より多くのナビゲーションのサンプル動的なドライブで使用可能-すべてのそれらのアール:

Dynamic Drive Horizontal Menus

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

私はこのチュートリアルでは有益な、便利なサービスを願っております。 私が言ったように、すべての論文は、これらのメニューをカスタマイズすることが可能です-は、時間と意欲を実現するために与えられます。

私はあなたの契約に基づいてこの作業を行うことができます。 ちょうどあなたのようなメニューで、 私に連絡を選ぶと私は、コードとの指示お客様のウェブサイトの上で動作します。

$ 20

そしてもちろんの場合、最大のスーパーSEOのプレミアムワードプレスのメンバーシップは、ポータルに最適化-このため、最適なソリューションを構築している:
論文のテーマ + 会員のプラグインMemberWing + 自己もちろん、Wordpressのホスト

コメントを残す

前のポスト:

次の記事: