WordPress（だけじゃないけど）を解説している素晴らしいサイトを発見！！

WordPressでブログじゃないWebサイトを作るときのいろいろ（サンプル付き）

これまで、素人なりにWordPressのこと、何となく分かっていた気になっていたけど、全く分かっていなかったことに気付かされました。

私は、まだまだ知識不足のため、書かれていることを全て理解できていないですが、それなりの人が見たら、きっと、すごく分かりやすい説明だと思います。

 また、デザインもイイ！

これまで、「無料で配布されるテーマをちょっと改造して使う」って頭しかなかったので、どうしてもブログブログしたサイトにしかなりませんでした。

同じWordPressを使っていても、デザインのセンスとWordPressの知識のある人に係ると、こんなにも素敵なサイトにすることができることを知りました。

あまりWordPress詳しくない人でも、WordPressに取り組み始める前に、まず、このサイトを見ておくと良いと思います。

他の初心者と同じようにWordPressに取り組んだとしても、より良い道をたどる道標となると思います。

サンプルサイトを真似しながら勉強していて、１点、とても難しかったことがあったので、ちょっと記録しておきます。

 それは、ナビゲーションのコントロールです。（現在ページは、色が反転したりするやつです。）

リンク先のサンプルサイトの上部のナビゲーションのブログをクリックすると、ブログ用に作成したテンプレートを使用したページ（固定ページ）が表示されます。

 このページでは、複数の投稿が表示されます。（もともとのWordPressに手を加えずに使ったときのトップページと同様です。）

そのとき、ナビゲーションの選択した「ブログ」のところは少し大きくなり、そのメニューが選択されていることを示しています。

ここまでは、WordPressの機能とCSS（スタイルシート）の記述で、深く考えなくても対処できました。

サンプルページでは、ここから個別記事のページへ進んでも、「ブログ」のところは少し大きくなったままです。

これは、当然のことだと思っていました。

ところが、実際にやってみると、何も対応をしなければ、ナビゲーションの選択した「ブログ」のところは未選択の状態になってしまいます。

インターネットで検索して、一応、ドンピシャな質問を質問箱に見つけたのですが、残念ながら、そこでは結論には至っていませんでした。

 http://questionbox.jp.msn.com/qa6963466.html

困った・・・

仕方ないので、未熟な知識でいろいろ考え試行錯誤して、ようやく１つの答えに達しました。

（きれいな答えかどうかはわかりません・・・）

結局、ヒントは、WordPressでブログじゃないWebサイトを作るときのいろいろ（サンプル付き）に書かれていました

post_class();を使いました。

私のテンプレートでは、次のようになっていました。

<div id="menus">

         <?php wp_nav_menu( array(
'container' => 'none', 'theme_location' => 'primary' ) ); ?>

</div>

これを、<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>></div>で囲
んで次のようにしました。

<div id="menus">

      <div id="post-<?php the_ID(); ?>" <?php
post_class(); ?>>

            <?php
wp_nav_menu( array( 'container' => 'none', 'theme_location' => 'primary' )
); ?>

      </div>

</div>

　

id="post-<?php the_ID(); ?>"  は、post_class();
を説明している別のサイト（どこか忘れました）にサンプルが書いてあったので、そのままとりあえずつけている感じです。私のレベルは、所詮、この程度です（苦笑））

実際に画面を表示して、ソースを見ると次のようになります。

ブログの個別投稿表示時

<div id="menus">

   <div id="post-159" class="post-159 post
type-post
status-publish format-standard hentry category-etc">

      <ul id="menu-main-navi" class="menu">

         <li id="menu-item-174"
class="menu-item menu-item-type-custom menu-item-object-custom
menu-item-home menu-item-174"><a href="http://www.xxxxxxxxx/">TOP</a></li>

         <li id="menu-item-165"
class="menu-item menu-item-type-post_type menu-item-object-page
menu-item-165"><a title="post"
href="http://www.xxxxxxxxx/blog">ブログ</a></li>

         <li id="menu-item-167"
class="menu-item menu-item-type-post_type menu-item-object-page
menu-item-167"><a href="http://www.xxxxxxxxx/support">aaaaa</a></li>

      </ul>

   </div>

</div>

固定ページ表示時

<div id="menus">

   <div id="post-155" class="post-155 page
type-page status-publish hentry">

      <ul id="menu-main-navi" class="menu">

         <li id="menu-item-174"
class="menu-item menu-item-type-custom menu-item-object-custom
menu-item-home menu-item-174"><a href="http://www.xxxxxxxxx/">TOP</a></li>

         <li id="menu-item-165"
class="menu-item menu-item-type-post_type menu-item-object-page
page-item-155 menu-item-165"><a
title="post" href="http://www.xxxxxxxxx/blog">ブログ</a></li>

         <li id="menu-item-167"
class="menu-item menu-item-type-post_type menu-item-object-page
current-menu-item page_item
current_page_item menu-item-167"><a href="http://www.xxxxxxxxx/support">サポート</a></li>

      </ul>

   </div>

</div>

これを踏まえて、CSSを設定しました。

つまり、ブログの個別記事は、type-post と menu-item-165（この値は、メニューを作成したときに固定されるようです） でコントロールする

固定ページ（ブログ用に作成した「ブログトップページ」も含む）は、type-page
と current_page_item でコントロールする

以上です。