WordPressのテーマを作成覚え書き

- February 07, 2016

WordPressのテーマの格納場所は基本的に
/wp/wp-content/themes/にある。

テーマの基本構成

index.php：基本テンプレ
（home.phpやfront-page.php）：TOP用テンプレ（index.phpでまかなえるなら不要）
header.php：ヘッダー用
footer.php：フッター用
single.php：投稿ページ用
page.php：固定ページ用
archive.php：月別記事一覧などアーカイブ用
category.php：カテゴリー一覧など用
functions.php：機能実装用
style.css：テーマ情報記載用CSS
screenshot.png ：テーマの画像

index.php、style.css、screenshot.pngさえあればテーマとしては一応成立して表示はされる。

※ むしろndex.php、style.css、screenshot.pngがなければ表示されない。

基本のWordPressコーディングファイル構成

共通ファイルの/common/フォルダの扱いについては

①ルート直下(/)に置くパターン

②自作テーマの中に含めちゃうパターンの2パターンある。

パターンの判断としてはクライアントの指示を仰ぐ場合もありますが、

全ページをWordPress化してテーマを入れ替えるだけで全部済ませたい場合は②、それ以外のサイトの一部をWordPress化する場合は①を選択する場合が多い。

テーマフォルダを作成してテーマを作成

/themes/ディレクトリの中に「mytheme」と命名したフォルダを作成します。

そのなかに、まず、

index.php

style.css

screenshot.png

を入れる。

そうすると管理画面の「外観」→「テーマ」から自作テーマが選べるようになります。

index.php

サイトの基本となるテンプレートphp。

この段階ではまだ何も書かなくて大丈夫。

style.css

テーマ情報を記載するCSS。

ここにサイトのレイアウト用CSSを追記する方もいますが、

M先生は好みじゃないのでテーマ情報しか記載しないそう。

テーマ情報の記載方法

WORDPRESSCodexを見ると、

style.css

Theme Name: Twenty Thirteen

Theme URI: http://wordpress.org/themes/twentythirteen

Author: the WordPress team

Author URI: http://wordpress.org/

Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.

Version: 1.0

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready

Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.

Use it to make something cool, have fun, and share what you've learned with others.

とテンプレートが長々と書いてあるが、
これくらいでOK。

style.css
/*
Theme Name: 自作pqスペシャル
Author: P Q
Description: このテーマはpq制作の自作WordPressテーマです。
*/

Theme Nameには案件の場合だとサイト名を入れる場合が多い。
（例：XXXXX株式会社Webサイトのテーマ）
Authorは案件のときは書いても書かなくても良い。
Descriptionはクライアントや運用の人が分かりやすい説明を書いておく。

screenshot.png

サイトのキャプチャー画像やそのサイトのイメージ（ロゴなど？）をPhotoshopで軽く編集して作成します。
現在、WordPress標準のテーマのscreenshotの画像サイズが880 × 660なのでそれで作成する。
また、この名前(screenshot)以外だと表示されないので気をつける。拡張子はpng以外にもjpg, gifでもOK。

そして、このテーマを「外観」→「テーマ」から「有効化」する。

テーマに必要ファイルを入れて表示テストをする。

ここからいよいよカスタマイズ。

まず、静的に作成したHTMLファイルを用意する。

次に、「mytheme」フォルダに

header.php

footer.php

を追加する。

header.phpには

footer.phpには

までをコピペでひとまず入れておく。

次にindex.phpにheader.phpとfooter.phpを表示させる呪文を書く。

index.php

<?php get_header() ?>

<?php get_footer(); ?>

もろもろ追加して......

index.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no">
<title>PAGETITLE｜SITENAME</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="/common/css/base.css" media="all">
<link rel="stylesheet" href="/common/css/module.css" media="all">
<script src="/common/js/jquery.js"></script>
<script src="/common/js/common.js"></script>
</head>
<body id="gDef" class="lDef">
<div id="anc_pagetop" class="wrapper">
<?php get_header() ?>

<?php get_footer(); ?>
</body>
</html>

こんな表示でHTMLにCSS読み込まれていな状態のようなものが出て来ればひとまず安心。

CSSを適用させる

今回はテーマの中にcommonフォルダを入れてしまうパターン②を適用してみる。

あえて茨の道です。

②の場合だと、

href="/common/css/base.css"

でCSSが反映されない。

（①の方法だと普通に反映される。）

なので下記のようなコードを挿入する必要がある。

<?php echo get_template_directory_uri(); ?>

get_template_directory_uri：テーマ内のディレクトリのURLを取得する

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/common/css/base.css" media="all">

で取得できる。

じゃあ、CSSファイル内で指定している画像はどうすんの？？

CSSファイル内だと、phpが効かないのでget_template_directory_uriの魔法は通用しない。

なので、url内をベタ書きで書き直してあげる必要がある。

/wp/wp-content/themes/mytheme/common/base.css

.header-navi > li::before {
・・・
background: url(/wp/wp-content/themes/mytheme/common/img/ico_circle_arrow_01.png) top left no-repeat;
・・・
}

ループを理解して記事一覧を表示する

ループとは

WordPressの投稿を繰り返し表示する仕組みだと思っておけばOK。

これで投稿した記事内容や記事一覧が表示できる。

ループの例

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

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

<?php the_post();?>

//ここにループの中身

<?php the_content(); ?>

<?php endwhile; ?>

<?php endif;?>

have_posts() ：記事があるだけ取得する

the_post() ：記事を取得する

なのでwhile(have_posts())〜 the_post()で記事の数だけ情報を取得している。

そして

the_content()：記事本文を取得で本文を取得している。

それではループ内にHTMLを仕込んでみる。

HTML
<ul class="list-news">
<li>
<p class="date">2013.03.15</p>
<div class="detail">
<ul class="list-cmn">
<li><a href="">ダミーテキスト・・・</a></li>
</ul>
</div>
</li>
</ul>

HTMLにループ用のWordPressコードを適用
<ul class="list-news">
<?php if (have_posts()) :?>
<?php while (have_posts()) :?>
<?php the_post();?>
<li>
<p class="date"><?php the_date(); ?></p>
<div class="detail">
<ul class="list-cmn">
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
</ul>
</div>
</li>
<?php endwhile; ?>
<?php endif;?>
</ul>

ループさせたいのは<li>の部分のため<li>〜</li>をループのphpコードで囲む。

the_date()：日付を表示
the_permalink()：記事のリンクを表示
the_title()：記事のタイトルを表示
この<?php the_XXXX(); ?>というのはWordPressのテンプレートタグというもの。

WORDPRESS日本語Codex というWordPressのwikipediaみたいなものがあるのでここでテンプレートタグを調べながら実装してみる。

ループまで出来れば、あとは状況に合わせて調べつつ実装をしていくだけ。

この記事はM先生が書かれて教えていただいた記事に書き込みしながら復習のために書いたものです。
M先生ありがとうございます。

Search This Blog

pqnology

The Newest Post

吼えろ!ドラゴン起て!ジャガー