simplecoreな毎日

アラフォー既婚男性の日々、子育て、その他雑記

2017.11.17

【WordPress】シンプルなオリジナルテーマの作り方(1)

WordPress

読み返したところ気に入らない点が多々あったため、当初とは大幅に内容を修正しました。一度確認してみてください。最終更新日は2017年11月28日です。

WordPressには既に様々なテーマがあります。サイトの目的に合わせて色々なテーマを探してみるのも楽しいものです。ただ、痒いところに手が届くかどうか、という点ではやはり自作のテーマにはかないません。

どういったサイトやブログにしたいのか、WordPressのオリジナルのテーマの作り方は人によってそれぞれだと思いますが、僕なりのWordPressのオリジナルのテーマの作り方を今回から何回かに分けて書いていこうかと思います(一度に書くのも大変なので・・・)。まあ、似たような内容は他にもたくさんの方が紹介されていますが、個人的なメモとしても残しておこうかと。

また予め断っておくと、そんなに大したことはしないです。僕自身PHPに詳しいわけではありませんし、WordPressのテーマも基本的にはその都度調べながら作業をしています。それに、先にも書いた通りサイトの目的によってテーマの完成形は千差万別。それらに必要な機能を全て網羅しようと思ったらキリがありません。

なので、オリジナルテーマの作り方の基本的な部分の説明になると思いますが、ものすごくシンプルなテーマになるはずなので、逆に言えばカスタマイズもしやすい形になると思います。多分。

まずはXAMPPをつかってローカル環境でWordPressを動かす準備

個人的にはXAMPPをつかって、まずはローカル環境で作成します。XAMPPをつかった環境の構築方法は下記で詳しく触れています。

【簡単!】XAMPPでWordPressをローカル環境で動かす方法
WordPressをつかってサイトを構築しようとするとき、いきなりサーバー上で構築していくのも手だとは思うのですが、例えばオリジナルのテーマを作成するときなんかは結構...

今回は、C:\xampp\htdocsの直下に置いたWordPressを「simple」という名前にしてテーマの作成を進めていきます。(本来は「wp」とか「wp_test」の方がわかりやすかったかも知れません・・・)

テーマフォルダを作成

今回、「simple」という名前のWordPressを入れた場所は「C:\xampp\htdocs\」なので、テーマフォルダの場所は「C:\xampp\htdocs\simple\wp-content\themes」になります。

この「themes」フォルダの中に「simpletheme」というフォルダを作ります。これが今回作成するテーマのファイルを入れる場所になり、テーマ名も「simpletheme」ということにします。

テーマのサムネイルを用意

1200px×900pxで作り、テーマフォルダ直下にscreenshot.pngという名前で保存します。必ずしも必要なものではないですが、これがあると無いとではテンションが変わる気がします。あくまで「気がする」だけです。

ベースとなるそれぞれのphpを用意

header.php

header.phpへの記述内容は下記になります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><?php wp_title( '|', true, 'right' );bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body>
<?php wp_title( '|', true, 'right' );bloginfo('name'); ?>

は、<title>、

<?php bloginfo( 'stylesheet_url' ); ?>

は、style.cssへのパス、

<?php wp_head(); ?>

は、プラグインを動作させるためのタグで、</head>の直前に入れます。必須です。

以上がheader.phpの最低限の内容になりますが、今回は楽をして簡単にテーマを作りたいため、bootstrapのCSSも読み込んでおきます。さらに、fontawesome、Googleフォントも読み込みます。最終的には下記のような形になります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><?php wp_title( '|', true, 'right' );bloginfo('name'); ?></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700">
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body>

fontawesomeの使い方についてはこちらに詳しく書いています。

【初心者必見】WEBフォントFont Awesomeの使い方
WEBフォントつかっていますか?最近では様々なWEBフォントが出てきて、シンプルなものであれば、サイトのロゴなんかも割りと自由に表現出来ます。特にちょっとしたアク...

footer.php

footer.phpには最低限下記が必要です。

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

もプラグインを動作させるためのタグになり、</body>の直前に入れます。

ただ、ここでもbootstrapでつかうソースを読み込んでおきます。結果、このような形になります。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<?php wp_footer(); ?>
</body>
</html>

functions.php

functions.phpには後々色々と書いていきますが、とりあえず下記のみ。

<?php

// titleタグをhead内に生成する 
add_theme_support( 'title-tag' ); 
  
// HTML5でマークアップさせる 
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) ); 
  
// Feedのリンクを自動で生成する 
add_theme_support( 'automatic-feed-links' ); 
  
// ヘッダーにある不要なタグを削除する 
remove_action('wp_head', 'wp_generator'); 
remove_action('wp_head', 'wlwmanifest_link'); 
remove_action('wp_head', 'rsd_link'); 

まあ、コメントで書いてある通りの内容です。もちろんあっても無くても構いません。必要無い場合は、phpの開始タグだけでOKです。なお、functions.phpに記述するphpには閉じタグは必要ありません。

style.css

style.cssにはとりあえず下記を記述。

/*
Theme Name: simpletheme
Description: シンプルなWordPressオリジナルテーマ
Version: 1.0
*/

最低限これだけでも問題無いです。というかそもそもテーマを動かすのに絶対必要なものではありません。ただそういうわけにもいきませんが・・・

これから色々と書いていきますが、とりあえず現時点ではリセットCSSを書いておきます。Eric Meyer’s CSS Resetです。

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

さらにフォントやリンクの指定もしておきます。

body {
font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
color: #333;
font-size: 1rem;
line-height: 1rem;
}
a{
color: #333;
}
a:hover{
text-decoration: none;
color: #999;
}

index.php

index.phpには下記を記述します。

<?php get_header(); ?>

<?php get_footer(); ?>
<?php get_header(); ?>

はheader.phpを読み込むタグで、

<?php get_footer(); ?>

はfooter.phpを読み込むタグです。

この時点での「simpletheme」の中身

下記のようになっているかと思います。

テーマとして動作するかどうかの確認

これでテーマとして動作するか確認をします。

index.phpを下記のようにします。

<?php get_header(); ?>

これはsimplethemeのテスト

<?php get_footer(); ?>

この状態で「http://localhost/simple/」にアクセスして、ブラウザに「これはsimplethemeのテスト」と表示されていればとりあえずWordPressのテーマとしては動作していることになります。もちろん、このままでは何をどうやっても記事やページが出力されることはないので、全く役には立ちません。

ということで、次回以降、ちゃんとCMSとしてつかえるような形にしていきます。

想像力の欠如が害になる

THOUGHT

想像力の欠如が害になる

ウィンドウに合わせてグリッド化したブロックが動くMasonry.js

WEB

ウィンドウに合わせてグリッド化したブロックが動くMasonry.js

乳幼児を連れて免許更新。一人は厳しいかも

LIFE

乳幼児を連れて免許更新。一人は厳しいかも

台風クラブに思うこと

MUSIC

台風クラブに思うこと

楽天マガジンをつかってみた

LIFE

楽天マガジンをつかってみた

レスポンシブに対応したグリッドデザインがすぐに作れるGrid—A—Licious

WEB

レスポンシブに対応したグリッドデザインがすぐに作れるGrid—A—Licious

衣類乾燥除湿機を購入した話

LIFE

衣類乾燥除湿機を購入した話

【WordPress】シンプルなオリジナルテーマの作り方(3)~フッター~

WordPress

【WordPress】シンプルなオリジナルテーマの作り方(3)~フッター~