waka8*stakes

〜馬絵+林檎+Wordpress〜

素人が自作テーマを1から作ってみた(1) 個別ページ、トップページ、アーカイブ編

themechange

今まではTwentyElevenの子テーマ運用してちょっとしかデザイン変更してませんでした。そのまま2年程放置してましたが本腰入れてテーマをカスタマイズしようと心に決めました。
新しい中古Mac(なんのこっちゃw)を手に入れてローカル環境を整えたのを機に、運用中のデータベースとファイルをインポートして公開中のと同じような環境にしてテーマ弄りを始めました。

標準テーマの子テーマ作りに挫折

最初は手っ取り早く標準テーマ、TwentyThirtyの子テーマを作ろうとしてました。管理画面でできるカスタマイズも当然使えますし。ところがこれが思った程うまくいきません。
確か子テーマのCSSは親テーマのを上書きできたはずなのに何にも変わりません。表示されているものも消したり文面を書き換えたりしたいのですがテーマファイルをじっと見ていると何でもfunctions.phpでガチガチに設定されているようです。CSSも普通はheader.phpに<link rel="stylesheet" href=".......>と書かれてるものなのにCSSを読み込むlinkタグの記述がなくそれすらfunctions.phpでやっているみたいです。かなり作り込まれたテーマなのでPHPコードを1から書く能力のない私にとって好みに改造するには手強さを感じ、めんどくさくなってきたので1から作る事に。それとこの機会に前から考えてた「写真」のカスタム投稿タイプを作成しました。

PHPコードを自分でかけない私が1からのテーマ作りに挑戦

ちなみに私のレベルは

HTML
その昔、ブログが流行る前からほぼ手打ちで静的なホームページを作ってました。
CSS
細かいことはよく解ってませんが文字などの装飾に関しては空で書きます。
PHPとJavaScript
WPのテンプレートタグしか空で書けない…PHPのコードは公開されてる記事からパクっお借りしてます。WP以前にはページをパーツ分けするためだけにしか使ってませんでした。

要は『ホムペいぢりが趣味の素人レベル』ということです。

こんな風にして作りました

テキストエディタにカシガシとテンプレートタグとHTMLタグを繋ぎ合わせたコードを書き込んでテーマファイルを作ります。
header.phpやfooter.phpの事はおいといて、『記事を表示するところ』とか『アーカイブリストの1記事を表示するところ』とか部分部分をコーディングをします。

そしてWordpressテーマ作成に絶対必要な基本のループ↓

<?php if ( have_posts() ) : ?>
< while ( have_posts() ) : the_post(); ?>
表示する内容をHTMLタグとテンプレートタグを組み合わせて書く
<?php endwhile; ?>
<?php else : ?>
記事がなかったときに表示する内容
<? php endif; ?>

で囲みます。

個別記事を表示するページ(single.phpとpage.php)

  • 記事タイトルと日付とカテゴリーアーカイブページへのリンクの表示→headerで囲む
  • 記事本体→articleで囲む
  • タグアーカイブページへのリンク、コメント欄へのリンク→footerで囲む
    前後記事リンク→navで囲む
  • 関連記事→asideで囲む
  • ブログ、イラスト、写真でそれぞれ表示を変えたいのでイラスト、写真はカスタム投稿用テンプレートを用意(single-カスタム投稿タイプ名.php)してカスタムフィールドを使って画像作成日や使用アプリ等の情報を表示

上記を基本のループで囲んだらそれをdiv.contentで囲みます。

その下に

  • 関連記事のサムネイル画像とタイトルの一覧→aside
  • 前後の記事へのナビゲーションリンク→nav
  • コメント・トラック(ピン)バック欄、コメントフォーム等→aside

    コメントを受け付けるならコメント欄やコメントフォームを設置するcomments.phpを作成して読み込ませます。

すべてをdiv.contentで囲みました。

トップページ

front-page.phpを作成

固定ページテンプレートとして認識させるためにphpファイルの先頭に以下のコードを書きます。

<?php /*
Template Name: トップページ
*/ ?>

イラスト、ブログの新着情報一覧(題名とサムネイル画像)を表示したくて。
1ページに『イラスト』と『ブログ』の2個のループを使うのでそれぞれWP_Queryを使ったループで記事データを取得

<?php
$my_query = new WP_Query
( array(
   'post_type' => 'post', //表示したい投稿タイプ(post は基本の『投稿』)
   'posts_per_page' => '9', //表示したい件数
   'orderby' =>'date', //何の順に並べるか(date は日付順)
   'order' => 'DESC' )); //DESC は降順(記事が新しい順)。昇順(古い順)はASC。
if( $my_query->have_posts() ) : while ( $my_query->have_posts() ) : $my_query->the_post(); //ループ
?>
ここにHTMLタグとテンプレートタグで表示する内容をマークアップ
<?php endwhile;  endif; ?>
<?php wp_reset_postdata(); ?> //必ずリセット

アーカイブページ(archive.php category.php)

全てサムネイルを表示するようにしました。各投稿タイプ毎に以下のようにして基本ループで囲みました。
ページの下部にページ送り付きのナビゲーションリンク(←前 [1] [2] [3] 次→ みたいな形のやつ)を付けました。

それぞれのカスタム投稿タイプ用に「archive-カスタム投稿タイプ名.php」を作成して以下のよう名表示になるようにHTMLなどを書きました。

  • ブログ(投稿)のアーカイブはサムネイル、題名、カテゴリー、タグ、投稿日を一覧表示
  • イラストアーカイブはサムネイルと題名(大概馬名)とカスタムフィールドの情報を一覧で表示
  • 写真アーカイブはサムネイルと公開した日付のみにしてCSSでタイル風にならべて表示

カスタム投稿タイプで使うタグやカテゴリーはカスタムタクソノミーを使っているので「taxonomy.php」も作成しました。