スラッグ&ヘッダー画像自由自在

WordPressブログ管理者必見! 『スラッグ』を活用しよう (親としたら?)

『スラッグ』というのは、簡単にいうとこの『ページ名(URL)』の最後の部分を好きな文字列に指定できる機能のこと。WordPress内にも、投稿ページのスラッグを設定する機能、カテゴリーのスラッグを設定する機能が設けられています。この機能は見落としがちですが、『スラッグ』に注力してページを作成することでSEO効果が上がるという重要な機能。サイトエンジンの検索ロボットが、ページのスラッグを見て関連性が高さを判断しているからです。

ということなのですが、この設定にはもう一つ条件が必要とおもわれます。本体の「パーマリンク設定」との辻褄をあわせることです。

 

さて、少し複雑なカスタマイズをする時、特に分岐条件をなどを使ってヘッダー画像のページ別適宜表示などを計ったりするときにも、このスラッグは役に立ちます。 

 

丁寧な説明でお世話になりました。

★→http://www.html5-memo.com/mdn01/wordpress14/

 

header.phpにこの分岐条件を記述した例です。「images」にヘッダー画像群をアップしておきます。

なお、ヘッダー画像を簡易に指定出来る「カスタムヘッダー」の記述(functions.php)はコメントアウトして、中止しておきます20150816修正!!必要です。

<div id=”header”>
<?php if(get_header_image()): ?> 

<?php if(is_home()): ?>
//ホームであればここに記述したものを実行

<img src=”<?php bloginfo(‘template_url’); ?>/images/take7header140.png” width=”980″ height=”140″ alt=”テストです” />

<?php else: ?>
//それ以外ではここに記述したものを実行
<img src=”<?php bloginfo(‘template_url’); ?>/images/take7header140.png” width=”980″ height=”140″ alt=”テストです” />

<?php elseif(is_page(‘ ★’) ): ?>
//ページスラッグが
「★」であればここに記述したものを実行
<img src=”<?php bloginfo(‘template_url’); ?>/images/header140.png” width=”980″ height=”140″ alt=”テストです” />
<?php elseif(is_category(‘edit’)||in_category(‘edit’)): ?>
//カテゴリースラッグが「edit」であればここに記述したものを実行
//「A || B」と記述することでAまたはBの時にというように条件式内に2つの条件を入れることができます。
in_category(‘edit’)をそえることで、そのカテゴリーの全投稿ページのヘッダー画像を共通にする事が出来ます。
<img src=”<?php bloginfo(‘template_url’); ?>/images/header140.png” width=”980″ height=”140″ alt=”テストです” />

<?php elseif(is_post_type_archive(‘compo01g’)||is_singular(‘compo01g’)): ?>
//カスタム投稿タイプアーカイブページの場合。個別投稿ページなどを呼び込む「is_singular()」が必要です。
<img src=”<?php bloginfo(‘template_url’); ?>/images/header140.png” width=”980″ height=”140″ alt=”テストです” />

<?php endif; ?>

 というように、各部位のスラッグを代入することで適宜指定できます。

そして、「images」にそれぞれの画像をアップします。

また、グローバルナビは専用cssを設定します。たとえば。

<?php get_header(); ?>
<style>#gnavi { display: none }</style>
<div id=”gnav”>
<nav id=”gnav”>

この「gnav」は 

#gnav {
    background-color:#666666;
    clear:both;
    float:left;
    width:100%;
}・・・以下略

とします。例の「位置の管理」を導入したので、ここにサブメニューを追加していきます。

そしてさらに、各phpにgnaviを消して、ほしい「ナビ名」を記述

<?php get_header(); ?>
<style>#gnavi { display: none }</style>
<div id=”gnav”>
<nav id=”gnav”>
<?php wp_nav_menu( array( ‘theme_location’ => ‘gnav’ ) ); ?>
<!– /#gnav –></nav>
</div>

<div id=”contents” class=”clearfix”>

★少し複雑なウェッブサイトを制作するときは、こまめにスラッグを半角英数で記述しておきましょう。