こんにちは、ikuxxと申します。
という事で今回、シンプルなWordPressテーマを作ってみました。
今見ていただいている、こちらブログのテーマが今回自作したものになるのですが、
今回は、WordPressテーマを作る際に参考にしたサイトや、勉強方法、手順を、自分なりに大まかにまとめてみました。
まず、WordPressテーマを作るにあたって必要な事は、
もし、HTMLやCSSが分からないという人は、「Progate(プロゲート)」や「ドットインストール」などで勉強するといいでしょう。
「WordPress」と「PHP」に関しても「ドットインストール」で勉強できます。
WordPressテーマを作るための手順【ワードプレス化する方法】
WordPressテーマを作る手順を大まかに説明すると、
- 1. XAMPP(ローカル環境)にWordPressをインストール
- 2. WordPressの設定
- 3. HTML、CSSのファイルの準備
- 4. 作成したHTMLファイルをワードプレス化(ファイルの分割 → index.phpを分けていく作業)
今回紹介するのは4番目の、HTMLファイルをWordPress用に分割していく作業になりますね。
今回の内容は「ドットインストール」の動画を見ながら、自分で実際に入力をしながらまとめたものなので、
もし、自分で動画を見ながら一から入力するのが面倒だという人は、下にHTMLとCSSを書いたものを用意しておきましたので、そちらを利用するといいでしょう。
【今回使うテーマのHTML, CSSのコード】
See the Pen
ZwEaWp by みあちゃん❤️Web制作始めました (@malg_tw)
on CodePen.
WordPressテーマを作るためにファイルを準備し、分割していく
①「index.html」のファイル名を「index.php」に変更
まずは、自分のパソコンの「C:ローカルディスク」 → 「xamppフォルダ」の「htdocs」の中の「wordpress(自分で作ったデータベースのフォルダ)」の「wp-content」の中の「themes」フォルダの中に、今回新しく作るWordPressテーマ用のフォルダを作る
このフォルダの中に、自分で作ったWordPressテーマ用の「HTML(index.html)」「CSS(style.css)」、画像ファイルなどを全て入れ、
「index.html」のファイル名を「index.php」に変更
②「style.css」にヘッダー情報を入れる
「https://codex.wordpress.org/Theme_Development」にアクセスすると、
1 2 3 4 5 6 7 8 9 |
/* Theme Name: Twenty Thirteen Theme URI: http://wordpress.org/themes/twentythirteen Author: the WordPress team Author URI: http://wordpress.org/ Description: ::::: Version: 1.0 */ |
こういった感じのものが書いてあるので、この部分をコピーして「CSSファイル(style.css)」に貼り付け、内容を書き換える。
1 2 3 4 5 6 7 8 9 10 11 12 |
/* 例 Theme Name: テーマの名前を入力 Theme URI: http://テーマのURLを入力 Author: 作者の名前 Author URI: http://作者のURLを入力 Description: テーマの説明など Version: 1.0 */ |
このようにCSSファイルのヘッダー情報を書き換える事により、自分のWordPressテーマが適用出来るようになる。
※ファイルへのアクセス(ログイン)方法は、http://localhost/WordPress用に作ったフォルダの名前/wp-admin/
③WordPress用のファイルを準備する
①で作ったフォルダの中に、「header.php」「footer.php」「sidebar.php」「functions.php」を新しく作る。
④ファイルの分割 – 「header.php」
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのWordPress</title> <link rel="stylesheet" href="css/stylesheet.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <div id="header" class="container"> <h1><a href="">はじめてのWordpress</a></h1> <ul class="menu"> <li><a href="">menu</a></li> <li><a href="">menu</a></li> <li><a href="">menu</a></li> </ul> </div> <!-- HEADER --> |
上記のHTMLのヘッダー部分をカットして「header.php」に貼り付け
そして、切り取った部分には、
1 |
<?php get_header(); ?> |
と書く。
(これを入れる事によって「index.php」が読み込む時に、自動的に「header.php」を読み込んでくれる)
⑤「sidebar.php」「footer.php」
次に、サイドバー部分、
1 2 3 4 5 6 7 8 9 10 |
<div id="sidebar" class="container"> <div class="widget"> <h3>カテゴリー</h3> <ul> <li><a href="">アイテム</a></li> <li><a href="">アイテム</a></li> <li><a href="">アイテム</a></li> </ul> </div> <!-- WIDGET --> </div> <!-- SIDEBAR --> |
HTMLのサイドバー部分を切り取り、
1 |
<?php get_sidebar(); ?> |
と書き、切り取った部分はそのまま「sidebar.php」に貼り付け。
そして次に、フッター部分「footer.php」、
1 2 3 4 |
<div id="footer" class="container">フッター</div> </body> </html> |
を切り取り、 切り取った部分に
1 |
<?php get_footer(); ?> |
を貼り付け。
WordPressテーマ(ファイル全体)にCSSが適用されるように、ヘッダー部分を修正
「header.php」の
1 2 3 4 5 |
<link rel="stylesheet" href="style.css"> を、 ↓ <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> |
に変更する事で、ファイル全体にCSSが適用される。
次にタイトル部分、
1 2 3 4 5 |
<title>はじめてのWordPress</title> ↓ <title><?php wp_title('|', true, 'right'); bloginfo('name'); ?></title> に変更。 |
次に、
「header.php」の「h1」(ブログタイトル部分)、
1 2 3 4 5 |
<h1><a href="">はじめてのWordpress</a></h1> ↓ <h1><a href=""><?php bloginfo('name');?></a></h1> |
に書き換え。
そして次に、リンク部分
1 2 3 4 5 |
<a href=""> に、<?php echo home_url('/'); ?> を追加し、 ↓ <a href="<?php echo home_url('/'); ?>"> という風にする |
⑥固定ページのメニューバー部分「functions.php」
固定ページのメニューバー部分は、管理画面からいろいろとカスタマイズ出来ると便利なので、その為には「functions.php」を作る必要がある、
「functions.php」に
1 2 3 |
<?php add_theme_support('menus'); |
と入力。
次に、
「header.php」の、メニュー部分、
1 2 3 4 5 6 7 8 9 |
<ul class="menu"> <li><a href="">menu</a></li> <li><a href="">menu</a></li> <li><a href="">menu</a></li> </ul> を切り取り、 ↓ <?php wp_nav_menu(); ?> |
と書く。(切り取ったメニュー部分は必要ない)
※これをやる事によって、ワードプレスの管理画面の「ダッシュボード」→「外観」→「メニュー」から固定ページを追加出来るようになる。
そして、「header.php」に、
1 2 3 |
<?php wp_head(); ?> と入力 ※これがないと動かないプラグインなんかが出てくる。書く場所は</head>の手前 |
⑦サイドバーをウィジェット対応にする「functions.php」
サイドバーをウィジェット対応にする為に「functions.php」に、
1 2 3 4 5 6 7 8 |
register_sidebar( array( 'before_widget' => '<div class="widget">', 'after_widget' => '</div>', 'before_title' => '<h3>', 'after_title' => '</h3>', ) ); |
と追加する事によって、ワードプレス管理画面(ダッシュボード)に「ウィジェット」が追加される。
⑧ウィジェットを呼び出すようにするには「sidebar.php」
実際に、ウィジェットを呼び出す場合は「sidebar.php」の、
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="widget"> <h3>カテゴリー</h3> <ul> <li><a href="">アイテム</a></li> <li><a href="">アイテム</a></li> <li><a href="">アイテム</a></li> </ul> </div> <!-- WIDGET --> このウィジェット部分を削除し、 <?php dynamic_sidebar(); ?> と書く |
記事一覧部分(POST部分)「index.php」
記事一覧(POST部分)を何度も繰り返す仕様にするために「index.php」の
1 |
<div class="post"></div> |
の前後に「PHP」で、ループ(繰り返し処理)の指示を出してやる必要がある。
「index.php」の、
1 |
<div class="post"> |
の手前部分に、
1 2 3 4 5 |
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> |
次に、
1 |
<div class="post"></div> |
この閉じタグ部分の後に、
1 2 3 4 5 6 7 8 9 10 |
<?php endwhile; else: ?> <p>記事はありません</p> <?php endif; ?> |
と追加(このループ命令文の中に記事がある間はずっと繰り返すという指示)
記事タイトルと日付、カテゴリー部分
次に、記事タイトル部分、
1 2 3 4 5 |
<h2><a href="">タイトル</a></h2> ↓ <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> に変更。 |
次に、日付の部分とカテゴリの部分、
1 2 3 4 5 6 7 8 |
<div class="post-meta">2018年12月12日 【カテゴリ】</div> を、 ↓ <div class="post-meta"><?php echo get_the_date(); ?> 【<?php the_category(', '); ?>】</div> に変更。 ※<?php echo get_the_date(); ?> は、日付に適用 ※<?php the_category(', '); ?> はカテゴリー部分に適用 |
次に、本文の抜粋部分、
1 2 3 4 5 |
<p>本文。本文。本文。</p> を、 ↓ <?php the_excerpt(); ?> に変更。 |
アイキャッチ画像を管理画面から指定出来るように
アイキャッチ画像も、管理画面から指定が出来ると簡単で便利なので「functions.php」に、
1 |
add_theme_support('post-thumbnails'); |
を追加する事によって、投稿画面からアイキャッチ画像を指定出来るようになる。
そして次に、
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="post-image"></div> の中、 <img src="/image/img-1.jpg" width="100" height="100"></div> の部分を、 ↓ <?php if (has_post_thumbnail()) : ?> <?php the_post_thumbnail(array(100, 100)); ?> <!-- ここで数字を入力し、サイズを調整出来る --> <?php else: ?> <img src="<?php echo get_template_directory_uri(); ?>/image/img-1.jpg" width="100" height="100"></div> <!-- ここは何も画像を指定しなかった時に表示させたい画像 --> <?php endif; ?> |
そして、画像のリンク部分に
1 |
<?php the_post_thumbnail(); ?> |
を追加する事によって、サムネイル画像を取得出来るようになる。
ナビゲーション部分とフッター部分
そして、次にナビゲーション部分、
1 2 3 4 5 6 7 |
<div class="prev">前へ</div> <div class="next">次へ</div> ↓ <div class="prev"><?php previous_posts_link(); ?></div> <div class="next"><?php next_posts_link(); ?></div> |
というタグを必ずループの外に書く。
そして、次にフッター部分を変更、
1 2 3 |
<div id="footer" class="container"> Copyright 2012<?php if (date("Y")!=2012) echo date("-Y"); ?> All rights reserved, dotinstall.com </div> |
と書く事により、年が変われば自動的にフッターの日付も変わるようになる。
そして、BODYの閉じタグ
自分で作ったサイトにワードプレスの機能を取り入れるには、一体どうやればいいんだろう?
PHP?とかあんまり難しい事は分からないんだけど