「選ぶ」だけじゃない！自分で作るWordPressのオリジナルテーマ

以下が、ブログとして基本的なファイル構成です。
必要に応じてjsなど他のファイルを追加していきます。

index.php
header.php
footer.php
sidebar.php
single.php
style.css
functions.php

webページの見た目としての構成は以下になります。
それぞれのファイルで各パーツを作る、PHPの特徴的な形です。

上の画像には入っていないファイルがいくつかありますが、
残りのファイルについてはのちほど各項目にて説明します。

WordPressテーマのディレクトリ構成が以下になります。

- wordpress
　- wp-content
　　- themes
　　　- sample
　　　（今回作ったテーマのディレクトリ）

「themes」の中にフォルダと、その中にファイルを入れるとWordPress管理画面の外観→テーマのページに今回作るテーマが表示されています。
サムネイル画像は任意ですが、あればオリジナルテーマ感が増すかと思います。

WordPressにはいわば専用のPHP関数、テンプレートタグというものがあります。
この関数の存在が、PHP初心者にも比較的簡単にテーマ制作ができる理由だと思います。
もちろん専用タグなのでWordPress以外では使えません。

今回、WordPressテーマを制作するうえで使用したテンプレートタグをご紹介します。

<?php wp_head(); ?>
// 記述したファイルがヘッダーであることを示す

<?php wp_footer(); ?>
// 記述したファイルがフッターであることを示す


<?php get_header(); ?>
// ヘッダーを呼び出す（表示する）

<?php get_footer(); ?>
// フッターを呼び出す

<?php get_sidebar(); ?>
// サイドバーを呼び出す


<?php wp_nav_menu(); ?>
// 固定ページのメニューを呼び出す

<?php echo get_stylesheet_uri(); ?>
// スタイルシートのURLを呼び出す

<?php echo get_site_url(); ?>
// サイトのURLを呼び出す


<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?><?php endwhile; endif; ?>
// 投稿記事を呼び出す
// （投稿記事、固定ページなど記述場所によって呼び出すものを判断してくれる）

<?php if ( is_active_sidebar( 'widget_area' ) ) : dynamic_sidebar( 'widget_area' ); else: ?><?php endif; ?>
// ウィジェット（カテゴリーやアーカイブ一覧など）を呼び出す

<?php if(is_home()): ?>トップに表示するもの<?php else: ?>トップ以外に表示するもの<?php endif; ?>
// トップページとそれ以外のページで違うものを呼び出す

<?php bloginfo(); ?>
// ブログタイトルを呼び出す

<?php the_title(); ?>
// タイトルを呼び出す
// （ページのタイトル、記事のタイトルなど記述場所によって呼びだすタイトルを判断してくれる）

<?php echo get_the_date(); ?>
// 投稿日時を呼び出す

さて、ようやくテーマの作成に入ります。
テーマを作るのに、最初からPHPを混じえて…というのは難しいので、
先にHTMLとCSSで全体の形を作っておきましょう。

今回サンプル用に作成したページがこちらです。

view sample

このHTMLを元に、パーツごとに分割してテーマを作っていきます。

いかがでしたか？
PHPが詳しく分からなくても、テンプレートタグを使って意外と簡単にテーマ作成ができたと思います。
今回はブログサイトとして最低限の要素だけを使ってサンプル用テーマを作りましたが、
WordPressではもっと多くの機能を追加することができます。
そういった様々な機能を使って、自分の理想のオリジナルテーマに近づけていけることがWordPressの醍醐味だと思います。

テーマ編集の練習などにご活用ください。

download