2014-02-01

WordpressのパンくずリストはSEOを考えて構造化しよう

WordPress

Wordpressでパンくずリストを表示するときに、真っ先に候補に上がるのがプラグイン「Breadcrumb NavXT 」なのですが、これってGoogle先生が提唱する「構造化データ」としてはイケてないので、自分で書くことにします。

microdataを使うこと

itemscope , itemtype , itempropという属性を使うらしい。例えばカテゴリだけ表示するとすると、

<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="<?php get_category_link( $cat->cat_ID ); ?>>" itemprop="url" rel="home">
    <span itemprop="title"><?php echo $cat->cat_name ;?></span>
    </a>
</li>

と先程の属性を使って、Google先生にデータの構造を教えてあげるそうです。

条件分岐すること

個別ページの場合 : 「Home > 親カテゴリ > 子カテゴリ > タイトル」
カテゴリアーカイブページ : 「Home > 親カテゴリ > 子カテゴリ > アーカイブページ番号」

のようにテンプレートによって表示する形式が異なるのでうまく分岐しないといけません。だいぶ長ったらしい条件分岐になるのですが高橋のりさんのこの記事が大変参考になります。

初心者の頃は、こういう「ブログじゃない Webサイト」向けのカスタマイズって、とっても難しく感じました。そこで今回は、WordPress で「パンくずリスト」を作りながら、「関連するページ」を表示するために覚えたい Tips を見ていきたいと思います。なんでパンくずリストなのかというと … パンくずリストというのは、「現在表示されているページの種類によって、様々な関連するリンクを表示する必要がある」からなんです。パンくずリストを作成してみると、WordPress サイトの構築の基礎というか、考え方みたいなものがとっても勉強になると思うんです。ちょっと無理矢理な展開ですけど、パンくずリストを作りながら、サイドバーなどで応用のきくコードを見ていきましょう！

パンくずリストを作ってみるとWordPress でのサイト構築のコツがつかめるかもしれない（コード付き）

ということで、頑張って自前で書くか。

2014-01-26

WPのカスタムフィールドでCustom Fields Template以外にAdvanced Custom Fieldsを使う理由

WordPress

なんかCustom Field Templateが一番オススメみたいですね。

そのおかげで Custom Field Template や Advanced Custom Fields, Types, Magic Fields その他のプラグインがあるのですが、データの持ち方をWordPressのカスタムフィールドから拡張しているものもあり、APIもまちまちです。上記の記法が素直に使えるのは Custom Fields Template くらいじゃないかと思います。こういうサードパーティ製のプラグインに頼らず、そこそこ入力しやすいインターフェイスがコアに実装されるのを待っているのですが、なかなか来ないですね。

ただし、カテゴリにカスタムフィールドが付けれない問題があるので、Advanced Custom Fieldsも使ったら良いよということらしいです。

正直、WordPressのカスタムフィールドのプラグインは『Custom Field Template』一択なのですが、『Custom Field Template』はカテゴリにカスタムフィールドを作成できません。なのでカテゴリにカスタムフィールドを設定したい場合だけ『Advanced Custom Fields』を『Custom Field Template』と平行して使用します。

できれば、WP標準関数で戦いたいけど、やっぱ無理なときはプラグインの独自関数に頼らざる得ないって感じなのかな。今度アフィリエイトサイト作るときに参考になりそうなのでメモ。

2014-01-26

WordPressのサブループで$posts = get_posts($args)とするとハマる

WordPress

<?php $posts = get_posts( $args ); ?>
<?php foreach($posts as $post) : setup_postdata($post); ?>
    <p><?php the_title(); ?></p>
<?php endforeach; ?>

と書いてサブループを作ってしまうと、のちに続くメインループが上書きされてしまいます。ハマります。なので、$postsは$my_postsとかにしておく必要があるそうです。

$posts = と書かないのは、$posts を復元する関数が用意されていないからです。

WordPress ループ＆クエリーのモヤモヤを解消しよう！ | wpxtreme

勉強ばっかりで開発が進まねぇ。

2014-01-26

Sassの配列とループを使って複数パターンのデザイン試す

nth(配列名, インデックスキー);

で呼ぶのがポイントですね。作業中のものをコピペすると次ようなイメージ。

/* pl-test */
$pl-width: 670px, 300px, null ,null;
$pl-float: null, left, null, null;
$pl-margin: 10px 20px , 10px 20px, 5px 5px, 5px 5px;
$pl-padding: null, null, null, null;

// eyecatch
$pl-eyecatch-width: 170px , 300px, 140px, null;
$pl-eyecatch-img-width: null, null, 100px, null;
$pl-eyecatch-img-padding: 15px 15px 0 15px, 20px 15px 5px 15px, 15px 5px 5px 5px, 15px 10px 5px 10px;


// each
@each $pl-num in 1, 2, 3, 4 {

    .pl-#{$pl-num} {

        @include clearfix;
        margin: nth($pl-margin,$pl-num);
        padding: nth($pl-padding,$pl-num);
        width: nth($pl-width,$pl-num) ;
        float: nth($pl-float,$pl-num) ;

        .date {
            color: darken($dh-gray,50%);
            border: solid 1px lighten($dh-gray,5%);
            font-size: 0.8rem;
            padding: 5px 5px;
            margin: 10px 15px 5px 15px;
            @include border-radius(2px);
        }
        
        .main-eyecatch {
            @include col;
            width: nth($pl-eyecatch-width,$pl-num);
            img {
                @include align-center;
                width: nth($pl-eyecatch-img-width,$pl-num);
                padding: nth($pl-eyecatch-img-padding,$pl-num);
            }
        }
    }
}

あ、ちなみにこれを試した理由としては、「コード量減って可読性が上がるかな」と思ったんですが、結局値が離れた位置に書いてあるし、あまり普通にCSS何個も書くのと変わらないなと思いました。残念。