Dreamweaverを使ったWordPressのテーマ制作-制作編-

前回から記載を始めた「Dreamweaverを使ったWordPressのテーマ制作-導入編-」の続きです。

Dreamweaverを使ったWordPressのテーマ制作-導入編-

弊社ではAdobeのコンプリートプランを契約しているため、ホームページ制作はDreamweaverを使用しています。 最新バージョンを使ったテー…

今回から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
*/

スタイルシートをテーマに紐付け

テーマにスタイルシートを反映させるため、新規作成でファイル名を functions.php にして以下の記述をします。配置場所は style.css と同じルートディレクトリになります。

sample
├ style.css
└ functions.php ←ここの編集をします

もちろん従来通りHTMLのようにヘッダーに直接記載することもできますが、この記載で functions.php からまとめて管理するようになり後が楽になります。

<?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>
<!--ここにコンテンツを記入します-->

フッターの作成

ヘッダーと同じように footer.php をルートディレクトリに新規作成します。

sample
├ style.css
├ functions.php
├ header.php
└ footer.php ←ここの編集をします

同じようにファイルを準備して以下の記述を行います。

<!--ここにコンテンツを記入します-->
<?php wp_footer(); ?>
</body>
</html>

すべてのページにヘッダーとフッターを反映

TOPページ・固定ページ・記事一覧・投稿記事ページに、先ほど作ったヘッダーとフッターを反映させます。

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など様々な使い道があります。

次回はスタイルシートをもっと使いやすくするための応用編となります。

Dreamweaverを使ったWordPressのテーマ制作-応用編-

前回のブログ「Dreamweaverを使ったWordPressのテーマ制作-制作編-」でHTMLファイルをWordPressに変換する作業が終わ…

この記事を書いた人

スギちゃん杉原 優介

ましろ未来図で制作を担当。