ホームページを作ろう!WordPress編(16)サイドバーをカスタマイズする

0

    JUGEMテーマ:ホームページ作成
    JUGEMテーマ:wordpress

    w067b →  w067

    現在のサイドバーは、全ページ共通で左の図のようになっています。でもトップページからいきなり各投稿タイプの下のカテゴリーページへ行けるのが便利かというと、そうでもない気がします。また隣の投稿タイプの下のカテゴリーページに一発で行きたいかといわれると、別に行く必要もないと思います。そこで、このサイドバーを修正してトップページには右の図のようなコンテンツを表示し、その他のページには各投稿タイプのサブメニューのみを表示するようにしましょう。

    それには、現在とあるページにいるかどうかを応えてくれる「is_****()」という形式のテンプレートタグと、phpのif文による条件分岐を使います。全体構成は以下の通りです。

    if(トップページ){
    トップページ専用コンテンツ表示
    }elseif(aboutページ){
    aboutページサブメニュー
    }elseif(ブログページかカテゴリーページかブログ投稿ページ){
    ブログページカテゴリーメニュー
    }elseif(ギャラリーページかgallerytypeタクソノミーページかギャラリー投稿ページ){
    ギャラリータクソノミーメニュー
    }elseif(ダウンロードページかdownloadtypeタクソノミーページかダウンロード投稿ページ){
    ダウンロードタクソノミーメニュー
    }elseif(リンクページ){
    リンクページサブメニュー
    }
    共通サイドバー項目(Google翻訳、Google Adsence)

    ではまずはトップページから行きましょう。現在トップページにいるかどうかを調べるには「is_home()」というテンプレートタグを用います。

    if(is_home()){…}

    というように使います。では{}の中身を作っていきましょう。ここには4つ載せたいものがあります。

    • アクセスカウンター
    • 管理人からのWelcomeメッセージ
    • サイトの更新情報
    • ゆるキャラペパクラインデックスへのリンク

    まずはアクセスカウンター。WordPressはPHPで書かれているので、PHP製のアクセスカウンターがあるとスルっと違和感なく導入できます。これはネットでシンプルなものを探し、PHP工房さんのアクセスカウンター(無料版)テキスト版を使わせていただきました。設置方法はそちらのサイトをご確認ください。サイドバーのPHPには下記4行(実質1行)記述するだけです。

    echo 
    '<h3>アクセスカウンター</h3>
    <iframe src="http://papercraft.techikun.com/count/count.php" height="50" width="200" frameborder="0" scrolling="no"></iframe>
    <hr>
    <br/>

    3行目の<hr>で横線をいれて、項目を仕切っています。

    次に管理人からのWelcomeメッセージ。これはもう上記echo文に続けて<h3><p>タグで書いてしまいましょう。

    <h3>ご挨拶</h3>
    <div class="information-container">
    <p>「ペーパークラフトが好きなんです」へようこそ!<br/>(長い名前ですみません)<br/>
    このサイトでは管理人が作ったり造ったり集めたりしたペーパークラフトを紹介しています。みなさまぜひごゆっくりお過ごしください</p>
    </div>
    <hr/><br/>

    次がサイトの更新情報です。これは「更新情報(information)」というカスタム投稿タイプを作ってしまい、最新3件をメッセージループで表示するようにしました。コードはこちら。

    <h3>更新情報</h3>';
    query_posts('post_type=information&posts_per_page=3');
    if(have_posts()): while (have_posts()): the_post();
    echo
    '<div class="information-container">
    	<div class="metabox clearfix">
    		<time class="post-date" datetime="'.get_the_date("Y-m-j").'">'.get_the_date().'</time>
    	</div>
    	<div class="information-post-container">';
    		the_content();
    	echo
    	'</div>
    </div>';
    endwhile; endif;
    echo
    '<div class="information-container">
    	<a href="http://papercraft.techikun.com/?page_id=52">過去の更新情報</a>
    </div>
    <br/>';
    wp_reset_query();

    1行目:タイトルです。

    2行目:検索条件(informationを3件)を設定。

    3〜14行目:メッセージループです。

    6〜8行目:投稿の日付を表示します。

    9〜11行目:投稿の中身を表示します。画像やタイトルなどない、シンプルな投稿にします。

    16〜18行目:過去の更新情報をまとめて表示する固定ページを1枚追加し、パーマリンクをここに埋め込みます。

    20行目:検索条件のリセットをお忘れなく。

    そして4つ目がゆるキャラペパクラインデックスへのリンクボタン。これは、私が最近作った、全国のゆるキャラのペーパークラフトのありかを集めたデータベースです。売り出し中のデータベースなので、トップからもショートカットを付けておこうというわけです。

    コードは簡単にこれだけです。

    echo
    '<hr/>
    <div class="link_ypindex">
    <h3><a href="http://papercraft.techikun.com/ypindex.php">ゆるペパインデックス</a></h3>
    </div>';

    実質は4行目の1行ですが、3行目でcss用にclassを振っています。

    ここから3つは最初のサイドバーにあったサブメニューを割り振るだけです。

    まずaboutページ。

    } elseif (is_page('25')){
    echo
    '<h3>about</h3>
    <div class="menu-about-container">
    	<ul>
    		<li><a href="http://papercraft.techikun.com/?page_id=25#category_a">このサイトについて</a></li>
    		<li><a href="http://papercraft.techikun.com/?page_id=25#category_b">管理人について</a></li>
    	</ul>
    </div>';

    1行目のelseif文で、is_page(‘25’)というテンプレートタグを使って、ページID=25のページ(=aboutページ)にいるかどうかを判断しています。その先は元のサイドバーと同じです。

    次にブログページ。今度はブログのトップに居ても、カテゴリーページに居ても、個々の投稿ページに居ても、サイドバーには同じカテゴリーメニューを表示するようにします。コードは以下の通り。

    } elseif (is_singular('post') or is_category() or is_page('27')) {
    echo'<h3>ブログ</h3>';
    wp_nav_menu('menu=blog-type');

    1行目のis_singular(‘post’)が単一投稿ページ、is_category()がカテゴリーページ、is_page(‘27’)がブログのトップページの判断タグになります。あとは元のサイドバーと同じです。

    ギャラリーページはブログページとほとんど同じです。

    } elseif (is_singular('gallery') or is_tax('gallerytype') or is_page('29')){
    echo'<h3>ギャラリー</h3>';
    wp_nav_menu('menu=gallery-type');

    1行目のis_singular(‘gallery’)が単一投稿ページ、is_tax(‘gallerytype’)がタクソノミーページ、is_page(‘29’)がギャラリーのトップページです。

    次のダウンロードは、サブメニューの前に、ダウンロードページ専用のアクセスカウンターを付けてみました。検索やリンクなどからこのページに直接来る人も多いので、試しにつけてみています。コードはこちら。

    } elseif (is_singular('downloads') or is_tax('downloadtype') or is_page('31')) {
    echo
    '<h3>アクセスカウンター</h3>
    <iframe src="http://papercraft.techikun.com/count/count2.php" height="50" width="200" frameborder="0" scrolling="no"></iframe>
    <hr/>
    <br/>
    <h3>ダウンロード</h3>';
    wp_nav_menu('menu=download-type');

    1行目はギャラリーページとほとんど同じです。

    3〜6行目はトップページのアクセスカウンターとほとんど同じです。

    そして7〜8行目は、元のサイドバーと同じになっています。

    最後のリンクページはこうなります。

    } elseif (is_page('34')){
    echo'
    <h3>リンク/インデックス</h3>
    <div class="menu-link-container">
    	<ul>
    		<li><a href="http://papercraft.techikun.com/?page_id=34">リンク集</a></li>
    		<li><a href="http://papercraft.techikun.com/ypindex.php">ゆるキャラペパクラインデックス</a></li>
    	</ul>
    </div>';
    }

    リンクページのページIDは34ですので、is_page(‘34’)で識別しています。もちろん自分で作る際は自分のページIDを入れてください。

    さて、この後ろに共通項目を2つ入れると書きました。

    まずGoogle翻訳。これは「Google Language Translator」というプラグインを入れます。導入し有効化すると設定メニューの中に「Google Language Translator」という項目ができます。私の設定例を次の画像で示しますので、参考にしてください。

    w068aw068b

    PHPコードは以下の通り(実質1行)です。

    <hr/>
    <br/>
    <div class="glt"><?php echo do_shortcode('[google-translator]'); ?></div>
    <br/>
    <hr/>
    <br/>

    最後にGoogle Adsence。摩天楼ワイド、というタイプの広告が横幅198pxとサイドバーにぴったりなので、これを貼り付けます。コードはこちら。

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- 摩天楼ワイド -->
    <ins class="adsbygoogle"
         style="display:inline-block;width:198px;height:600px"
         data-ad-client="ca-pub-****************"
         data-ad-slot="**********">
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    </div>

    以上で1つのサイドバーテンプレートファイルで、各ページ内容に応じたサイドバーを表示できるようになりました。

    だんだんサイトが出来上がってきました。次回はパンくずリストを作ります。


    コメント
    コメントする








       

    calendar

    S M T W T F S
      12345
    6789101112
    13141516171819
    20212223242526
    2728293031  
    << October 2019 >>

    アクセスカウンタ

    合計:
    今日:
    昨日:

    selected entries

    categories

    archives

    recent comment

    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      小田きく江
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      てちくん
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      suraugi
    • いそべぇのペーパークラフトを作る(初級編)(12)
      てちくん
    • いそべぇのペーパークラフトを作る(初級編)(12)
      だべえ
    • noomでマイナス12kgのダイエットに成功!
      Yoko

    recommend

    recommend

    recommend

    ドール デザートメーカー ヨナナス901
    ドール デザートメーカー ヨナナス901 (JUGEMレビュー »)

    結構高いんです、でも欲しいんです!

    links

    profile

    書いた記事数:173
    最近の更新日:2017/01/30

    search this site.

    others

    mobile

    qrcode

    powered

    無料ブログ作成サービス JUGEM

    Google Adsense

    楽天ブックス

    楽天