WordPressでテーマの作成

2016/10/27

CSSとHTMLコーディングデータがあり、それをWordPressのテーマに反映させる必要があった。ちょっとしたデザインの変更であれば既存のテーマを修正する形がよさそうだけど、今回のケースだと1から作ったほうが早そうだった。その中で今後役立ちそうな部分のメモ。

見出し

1 前提
2 ディレクトリの作成
3 メインのCSSに関して
4 スクリーンショット画像
5 共通パーツ
6 TOP / 固定ページ / 投稿ページ
7 404ページ
8 完成
9 よく使うWordPress用関数
10 リファレンス
11 その他

前提

最低限だとCSS、PHPが1ファイルずつとスクリーンショット画像のみでいけるけど、ヘッダー&フッター等の共通パーツや固定ページ用、投稿ページ用ファイルも作るものとする。

ディレクトリの作成

/wordpress/wp-content/themes/以下に適当な名前のディレクトリ作成する。テーマ名にするのが通例っぽい。今回はtest-themeとする。

メインのCSSに関して

名前はstyle.cssにする。また、そのファイルの上部に以下記述を行う。

/*
Theme Name: テーマ名(今回だとtest-themeになる)
Description: テーマ説明
Version: バージョン(1.0とか)
Author: 作成者名
Author URI: 作成者サイトURL
*/

Theme Name: テーマ名(今回だとtest-themeになる)

Description: テーマ説明

Version: バージョン(1.0とか)

Author: 作成者名

Author URI: 作成者サイトURL

スクリーンショット画像

サイズは300 x 225pxでscreenshot.jpgもしくはscreenshot.pngの画像を用意する。

共通パーツ

ヘッダー部分はheader.php、フッター部分はfooter.php、サイドバー部分はsidebar.phpという名前のファイルを作成し中身を入れていく。

尚、注意点としてheader.phpの<head>タグ内に<?php wp_head(); ?>を、footer.phpの</body>タグ前に<?php wp_footer(); ?>を記述しておく。これを書いておかないとプラグインとかで呼び出すCSSやJSファイルなどが呼び出されなくなる。

また、他のページから共通パーツを呼び出したい場合は以下の通り記述する。

<?php get_header(); //ヘッダー?>
<?php get_sidebar(); //サイドバー?>
<?php get_footer(); //フッター?>

<?php get_header(); //ヘッダー?>

<?php get_sidebar(); //サイドバー?>

<?php get_footer(); //フッター?>

TOP / 固定ページ / 投稿ページ

TOPページはindex.php、固定ページはpage.php、投稿ページはsingle.phpという名前のファイルを作成し中身を入れていく。ざっくりとだけど共通パーツを読み込んだ上で、コンテンツを表示させたい部分に以下で出力する。

<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
		<?php the_content(); ?>
	<?php endwhile; ?>
<?php else : ?>
	not found
<?php endif; ?>

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<?php the_content(); ?>

<?php endwhile; ?>

<?php else : ?>

not found

<?php endif; ?>

尚、固定ページと投稿ページを設定したら必ずどちらかになりそうなもんだけど、そうならないページが1つあった。それはWordPressのダッシュボードで「設定→表示設定→フロントページの表示→固定ページにチェック→投稿ページ」で選択したページはindex.phpが適用された。

404ページ

404.phpという名前のファイルを作成し中身を記述する。「ページが見つかりませんでした」みたいな表示でもいいし、PHPでTOPページに遷移させるようプログラムを書いてもいい。

完成

作成したファイルを全てtest-themeディレクトリにアップロードすれば完成する。WordPressnoダッシュボードから「概観→テーマ」から選択できる筈。

よく使うWordPress用関数

<?php
echo home_url(); //サイトURL
echo get_template_directory_uri(); //テーマを設置しているディレクトリのURL
if( is_front_page() ) //TOPページだった場合
if( is_page() ) //固定ページだった場合
$post_id = get_the_ID(); //ページIDの取得

<?php

echo home_url(); //サイトURL

echo get_template_directory_uri(); //テーマを設置しているディレクトリのURL

if( is_front_page() ) //TOPページだった場合

if( is_page() ) //固定ページだった場合

$post_id = get_the_ID(); //ページIDの取得

リファレンス

https://wpdocs.osdn.jp/Main_Page

その他

最初は敷居が高いかと思っていたけど実際に作るとそうでもなかった。最低限index.php / style.css / screenshot.jpgがあればテーマとして成り立つ。

今回は触らなかったけどテーマによってはダッシュボードと連携して設定を変えられたりするものもあるので、そういうのも挑戦してみたい。

- WordPress

: WordPressで複数のカテゴリーを取得する

WordPressで1つの記事に対して複数カテゴリを設定していた場合、テーマによ ...

: WordPressでサイトが改ざんされた際の対処方法

WordPressで立ち上げたサイトがあり、しばらく放置していたが久しぶりにチェ ...

: contact form7で送信時に別サーバへデータ送信

contact form7でフォーム送信時に別サーバーでフォーム内容をPOST送 ...

: ACFでセレクトメニューを動的に生成

WordPressでカスタムフィールド設定用のプラグインAdvanced Cus ...

: WordPressで逆アクセスランキングの設置

WordPressに逆アクセスランキングを設置したかった。ただ、広告が出ないタ ...

: WordPressで自動でmetaタグのkeywordsとdescriptionを表示

metaタグのkeywordsとdescriptionにて、基本的にはAll i ...

: WordPressにお気に入り登録機能とお気に入り一覧ページを作成する方法

WordPressにお気に入り登録機能をつけたかった。会員制のサイトじゃなかっ ...

: WordPressのfunctions.phpの初期設定

WordPressのテーマ作成時にfunctions.phpを書くが、いつも内容 ...

: WordPressのパーマリンクについて

WordPressのパーマリンクについて、思ったことなんだけど、・URLに日本 ...

: WordPressでテーマ内の共通の変数

WordPressでテーマ内の共通変数を設定し使用したかった。例えば記事一覧ペー ...

PREV: X-Frame-Optionsの設定
NEXT: Ajaxでプラグイン無しのファイルアップロード