今日の教材：Wordpress活用法の教科書⑦.pdf

テーマづくりの基本知識

「」 がphpの基本構文です。
プログラムの終了には必ずセミコロン「;」になります。
拡張子は、「.php」になります。

/wp-content/themes/ wordpressのテーマはここにある！
ここにあるからテーマを選べる。

テーマ作りに最低限必要ファイル

index.php：全てのテンプレート階層の元になる。何も階層なし、読み取るものがない時index.phpを表示。←index.htmlはTOPページ
と
style.css：テーマの情報を入力する場所。最初に/*Theme Name: ～～ */でテーマの情報書く。
例/*
Theme Name: テーマ名（必須）
Description: テーマの説明
Author: テーマ作成者の名前
Version: テーマのバージョン
Template: 親テーマ名
*/

Theme Nameは英数半角で途中に空白を空けない名称を指定。間作りたいなら-など使う

インクルード

全ページ共通のデザインにするなら、1つ作れば良い。

この3つは固定の書き方。ファイルとタグ
・header.php
<?php get_header(); ?> 取得しなさいこのファイルを、の命令
・footer.php
<?php get_footer(); ?>
・sidebar.php
<?php get_sidebar(); ?>

これ以外を作るなら
で命令！
(‘ ‘)の名前の.php作ればOK→sample.php

必ず入れるテンプレートタグ

<?php wp_head(); ?>：プラグインを読み込みなさい。の前に書く＝header.phpに書く
<?php wp_footer(); ?>：上の帯を表示させなさい。の前に書く＝footer.phpに書く

※index.phpでは<?php get_header(); ?>と<?php get_footer(); ?>で<?php wp_head(); ?><?php wp_footer(); ?>を読み込む。
<?php wp_head(); ?>は最初に、<?php wp_footer(); ?>は最後に書く

index.htmlはフォルダに入れない。
themeフォルダを作って、そこにファイルを入れていく。

screenshot.png（gif,jpg）：固定テーマ一覧でのTOP画像。
pngがよい。
サイズは横 880px x 縦 660px。
タイトルが入るので下に余白を空ける。

  • wordpress codex 日本語版：公式マニュアル。正しい情報見たいとき

テーマを作ってみる

大浜サイト付録A-4

ざっくり流れ

テーマ作成の原型となる HTML / CSS などのファイルを作成します。※必ず、通常のHTML、CSSを作った状態で開始！
サムネイル画像（screenshot.png）ファイルを作成します。
テーマ用フォルダ（theme-simple）を作成し必要ファイルをコピーします。※必要ファイル：style.css、functions.php、screenshot.png
テーマ情報（style.css）ファイルの中身を作成します。※上のコピーしたstyle.cssとは別。テーマの情報のみでOK
テーマの機能（functions.php）ファイルを作成します。
ページ共通ヘッダーテンプレート（header.php）ファイルを作成します。
ページ共通フッターテンプレート（footer.php）ファイルを作成します。
トップページテンプレート（index.php）ファイルを作成します。
テーマファイル（theme-simple.zip）を作成します。
WordPress ダッシュボードでテーマのインストールと有効化を行います。
表示確認を行うための投稿ページ、固定ページを作成します。
サイトの表示確認を行います。

ファイル構成

制御ファイル（最低限必要。空でも作っておく）
style.css
テーマ情報を記述。
functions.php
テーマの機能やショートコードを記述。メニューはheaderに置く、とか
screenshot.png
テーマ選択画面で使用するサムネイル画像

ページ共通のテンプレートファイル（各ページで共通に使用される部品）
header.php
ページ共通のヘッダーテンプレート
footer.php
ページ共通のフッターテンプレート
sidebar.php(なしの場合も多くあり)
ページ共通のサイドバーテンプレート

ページ個別のテンプレートファイル（ページの種別によって命名ルール有り）
front-page.php
トップページ用テンプレート
page.php
固定ページ用テンプレート
single.php
記事用テンプレート
category.php
カテゴリーの一覧（アーカイブ）表示用テンプレート
author.php
投稿者ごとの一覧（アーカイブ）表示用テンプレート
index.php
ブログ記事の一覧（アーカイブ）表示用テンプレート
date.php
年間、月間の記事一覧（アーカイブ表示用テンプレート
tag.php
タグの記事一覧（アーカイブ）表示用テンプレート
404.php
404（ページが存在しない）テンプレート
search.php
検索結果表示用テンプレート

作成手順

どこまでを共通ヘッダーにするのか
その範囲を新しい空のエディターにコピペ：header.php

どこまでを共通フッターにするのか
その範囲を新しい空のエディターにコピペ：footer.php

残ったmainの部分を、index.php
にする。
（sidebar.phpをなしとしている）

必ず入れるテンプレートタグ
<?php wp_head(); ?>：プラグインを読み込みなさい。の前に書く＝header.phpに書く
<?php wp_footer(); ?>：上の帯を表示させなさい。の前に書く＝footer.phpに書く

※index.phpでは<?php get_header(); ?>と<?php get_footer(); ?>で<?php wp_head(); ?><?php wp_footer(); ?>を読み込む。
<?php wp_head(); ?>は最初に、<?php wp_footer(); ?>は最後に書く

ワードプレスは、ファイルのパスは全て絶対パスで書かないといけない！相対パスを絶対パスに直すおまじないをする。
ファイルの読み込み：相対パスの前に”<?php echo get_template_directory_uri(); ?>”を書く！
リンク：”<?php echo home_url(”); ?>”を書く。呼び出したいフォルダの指定を入れるなら(”)内に書く
※ページ内リンクは#○○でOK

複数ページある場合（大浜サイトだと次郎くん）

元となる HTML ファイル（jirou.html）からヘッダー部とフッダー部を削除し page-jirou.php を作成します。
こちらも読み込み＆絶対パスに直す。

固定ページ（山田次郎の自己紹介）を表示させるために WordPress のダッシュボードで固定ページの作成を行います。
ページの内容は、記入不要ですがスラッグは、jirou と設定します。(パーマリンクをjirouとする）
→page-jirou.phpで保存しているので、読み込んでくれる。

完成したら、テーマフォルダはzipにしないとダメ。

フォルダ右クリック　送る→zip
　Wordpress外観→新規→生物アップロード→デスクトップのzipを選択。今すぐインストール。オリジナルテーマ完成！
公開画面見ると、Wordpressテーマ化したHTML / CSSが見れる