Dreamweaverを使ったWordPressのテーマ制作-制作編-
Warning: Undefined variable $sc_blogcard in /home/xs624906/mashiro-mirise.com/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(582) : eval()'d code on line 47
Warning: Undefined variable $sc_blogcard in /home/xs624906/mashiro-mirise.com/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(582) : eval()'d code on line 47
前回から記載を始めた「Dreamweaverを使ったWordPressのテーマ制作-導入編-」の続きです。
前回の記事はこちらから↓
今回からDreamweaverを使って最初からWordpressのテーマを制作していきましょう。
まずはWordpressの基本についてお話いたします。
WordPressテーマ制作の基本
まず、Wordpressのテーマを制作するにあたり必要なファイルを用意します。
主に以下のファイルを用意します。
- style.css（スタイルシート）
- functions.php（設定など）
- index.php（トップページ）
- header.php（ヘッダー）
- footer.php（フッター）
- page.php（固定ページ）
- archive.php（記事一覧ページ）
- single.php（投稿記事ページ）
以下は必須ではありませんがあった方がいいものとなります。
- taxonomy.php（カスタム投稿一覧ページ）
- date.php（日付別記事一覧ページ）
- category.php（カテゴリ別記事一覧ページ）
- tag.php（タグ別記事一覧ページ）
- search.php（検索結果ページ）
- 404.php（エラーページ）
スタイルシートを作成します
前章で作ったサンプルフォルダのルートディレクトリに「style.css」を新規作成しテーマのルールに沿った記述をしていきます。
sample
└ style.css ←ここの編集をします下部をコピペで必要な個所は編集をしてください。
/*
Theme Name: テーマの名前を記入します
Theme URI: テーマのURLを記入します
Author: テーマの作者（組織名）を記入します
Author URI: テーマの作者のURLを記入します
Description: ここにテーマの説明文を記入します
Version: 1.0
*/ここで注意する点があります！
テーマの名前とstyle.css内のTheme Name:は必ず同じでないとWordpress上でエラーとなります！
ここではファイル名「sample」に対してTheme Name:sampleということになります。
スタイルシートをテーマに紐付け
テーマにスタイルシートを反映させるので新規作成からファイル名を「functions.php」にして以下の記述をします。
配置場所はstyle.cssと同じルートディレクトリになります。
sample
├ style.css
└ functions.php ←ここの編集をしますもちろん従来通りHTMLのようにでヘッダーに直接記載することもできますが
この記載でfunctions.phpでまとめて管理するようになり後が楽になります。
僕の場合はstyle.cssを作ってルートディレクトリに配置したらもうそのファイルは操作しませんので代わりにmain.cssに内容を書くようにしていますので取り込むファイルは以下の二つとなっています。
<?php
function theme_name_scripts() {
wp_enqueue_style( 'style-css', get_stylesheet_uri() );
wp_enqueue_style( 'main-css', get_template_directory_uri() . '/css/main.css' );
//jQueryの読み込み
wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/jquery-3.4.1.min.js', '3.4.1', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
?>ヘッダーの作成
次にテーマの上部メニューにあたるヘッダーを作成しテーマに反映させていきます。
ルートディレクトリに新規作成を行い「header.php」を作成します。
sample
├ style.css
├ functions.php
└ header.php ←ここの編集をしますheader.phpに必要なコードは下記の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php bloginfo('name'); wp_title('|', true, 'left'); ?>
</title>
<?php wp_head(); ?>
</head>
<body>
<!--ここにコンテンツを記入します-->bodyタグ以下からグローバルナビゲーションを作成してください。
<?php wp_head();?>がWordpressの専用コードになりますので忘れずに記載をお願いします。
フッターの作成
ヘッダーと同じように「footer.php」をルートディレクトリに新規作成します。
sample
├ style.css
├ functions.php
├ header.php
└ footer.php ←ここの編集をします同じようにファイルを準備して以下の記述を行います。
<!--ここにコンテンツを記入します-->
<?php wp_footer(); ?>
</body>
</html><?php wp_footer();?>がWordpress専用コードになります。
フッターのコンテンツは<?php wp_footer();?>の上に書いていきます。
すべてのページにヘッダーとフッターを反映
TOPページ「index.php」、固定ページ「page.php」、記事一覧ページ「archive.php」、投稿記事ページ「single.php」に先ほどの作ったヘッダーとフッターを反映させます。
sample
├ style.css
├ functions.php
├ header.php
├ footer.php
├ index.php ←ここの編集をします
├ page.php ←ここの編集をします
├ archive.php ←ここの編集をします
└ single.php ←ここの編集をします新規作成からファイルを作り以下の記述を行いヘッダーとフッターを呼び出します。
<?php get_header(); ?>
<!--ここにコンテンツを記入します-->
<?php get_footer(); ?>コードの間にそれぞれのコンテンツを入れていきます。
これであとは今までどおりにコードを埋めていけばテーマが制作できます。
例えば記事一覧ページには投稿記事の一覧を表示させるためにループのコードを入れたり…と、phpのコードを覚えていくことにはなりますが、手打ちのHTMLよりは拡張性と機能性で可能性が広がったと実感が湧いてくるのではないでしょうか。
さいごに
WordPressのようなCMSはデータベース管理を得意としておりますので、ホームページ管理以外にも製品管理やCRMなど様々な使い道があります。
次回はスタイルシートをもっと使いやすくするための応用編となります。
