web開発

WordPressで自作テーマをサクッと作ってみる【その1】

もんしょー(@sima199407)です。

今回は、「WordPress」について書いていこうと思います。

WordPressといえば、ブログやサイトを簡単に作れるCMS(専門知識がなくてもできるサイト構築システム)です。

世界のwebサイトでもトップクラスのシェアを誇り、案件も非常に多いので勉強しておいて損はないスキルです。

WordPressでお仕事するならある程度のスキルを付ける必要がありますが、

その中でも「自作テーマ」を作成するというのがどうやら一つの基準になっているらしいので、

こちらを作ってみたいと思います。

今回のポイントは

・自作テーマはシンプルなものを作ります

・ポートフォリオとして使えるものにする

・わからないことは自分で調べるor実務で学ぼう

ということで作っていきましょう。

今回の流れ

以下の流れで作成していきましょう

・ファイルの作成
・テーマのアップロード
・メニューバーの作成

スモールステップで解説しながら作っていきますね。

①必要なファイルを作成しよう

以下のとおりです。

必要なファイル

* index.php

* header.php

* footer.php

* sidebar.php

* single.php

* functions.php

* style.css

index.phpがメインのコンテンツを表示するところで、

single.phpが記事の詳細ページを表示する部分です。

index.phpの作成

TOPページやカテゴリ一覧で使われるファイルです。

作成するなら以下のようにします


<?php get_header(); ?>
<div class="container">
<div class="contents">
</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

ほぼほぼ他のファイルの読み込みのパーツになります。

header.phpの作成

ヘッダーという名前だけあってサイト上部のパーツを作ります。

これは共通部分のファイルになります。

作成するなら以下のようにします


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 ">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?> >
<header>
<div class="header-inner">
</div>
</header>

メタ要素はこちらに書いておきましょう。

<head></head>

の中に

<!--?php wp_head(); ?-->

を入れておくことで後々にプラグインを使用することができるとのことです。

footer.phpの作成

headerがあればfooterも作っておきましょう

作成するなら以下のようにします


<footer>
<div class="footer-inner">
</div>
</footer>
<?php wp_footer(); ?><!--システム・プラグイン用-->
</body>
</html>

でシステムとプラグインを呼び出します。

sidebar.phpの作成

サイドバーも作成します。ブログではタグや検索、プロフィールが設置されます。

作成するなら以下のようにします


<aside id="sidebar">
<div class="sidebar-inner">
</div>
</aside>

single.phpの作成

single.phpは個別ページ(ブログで言えば記事にあたります)の表示に使用します。

作成するなら以下のようにします


<?php get_header(); ?>
<div class="container">
<div class="contents">
</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

ヘッダー、サイドバーとフッターを呼び出します。

functions.phpの作成

functionというのは関数という意味で、ここでページ全体を制御しているので、結構重要な部分です。

作成するなら以下のようにします


<?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' );
//アイキャッチ画像を使用する設定
add_theme_support( 'post-thumbnails' );
 

お手本通りに作ってみます。

style.cssの作成

スタイルシートはページの装飾、配置を決めるデザイン部分を作っています。

作成するなら以下のようにします


@charset "utf-8";
<!--エンコードがUTF-8であることを指定-->
/*
theme Name: test wp theme
Author:shohei
Description: original theme
version: 1.0
説明を書いておきましょう
*/
body {
/*フォントの指定*/
font-family: 'メイリオ', 'Meiryo', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'Noto Sans Japanese', Osaka, 'MS Pゴシック', 'MS PGothic', sans-serif;
/*サイト全体のフォントサイズを指定*/
font-size: 16px;
/*行間の指定*/
line-height: 1.7;
/*サイト全体にかかるmarginをリセット*/
margin: 0;
/*サイト全体にかかるpaddingをリセット*/
padding: 0;
/*サイトのデフォルトとなる文字の色を指定*/
color: #333;
}
/*見出しを全て太字で表示するように指定*/
h1, h2, h3, h4, h5, h6 {
font-weight: bold; //boldは太さを調整します
}
/*画像の最大幅を画面のサイズの最大幅に設定*/
img {
max-width: 100%;
height: auto;
}
/*ヘッダーの下に境界線を引く*/
header {
border-bottom: solid 1px #ddd; //soildは1本線
}
/*フッターの上に境界線を引く*/
footer {
border-top: solid 1px #ddd;
}

これもお手本通りにしていきます。

404.phpの作成

404とはページが見つからないときに出てくるページで「404 Not found.」という感じで表示されます。

作成するなら以下のようにします


<?php get_header(); ?>
記事がみつかりません。
<?php get_footer(); ?>

✔ここまでのファイルはこんな感じになってます

※function.phpではなく、正確にはfunctions.phpです。

作成したファイルを圧縮してアップロードする

WordPressにファイルを反映するときはzip形式にしてからアップロードします。

zip形式にする方法は以下のとおりです。

Windows
圧縮したいファイルの上で右クリック→『送る』→『圧縮(zip形式)フォルダー』
Mac
圧縮したいフォルダの上で右クリック(ctrl + クリック)→『”◯◯◯”を圧縮』
参考:https://plusers.net/wordpress_theme_1

ページを確認する

zipファイルをWordPressの「外観」→「テーマ」の「新規追加」でアップロードします。

無事にアップロードできましたら「有効化」をすると作成したテーマを表示することができます。

自作テーマのイメージをデザインする

ここまでで基礎の部分を作成しました。

次にデザインを作っていきましょう。

まず、完成イメージをワイヤーフレームでつくってみます。

ポイントは画面いっぱい伸ばさないことで、

最大幅を1000px~1200pxぐらいにすると収まりがいいですね。

style.css部分で確認してみましょう。

以下のcssを反映させます


/*確認用に一時記述----------*/
.contents, #sidebar {height: 800px; }
header{background-color: #888;}
.header-inner{ background-color: #ccc; height: 200px;}
.container {background-color: #9db2ea; }
.contents {background-color: #a5e2ff; }
#sidebar{background-color: #aefffc; }
footer{background-color: #777; }
.footer-inner{background-color: #ddd; height: 250px; }
/*------------------------*/

コンテンツの幅を設定します


/*コンテンツのサイズ指定*/
.header-inner, .container, .footer-inner {
max-width: 1200px;
margin-right: auto;
margin-left: auto;
/*↓記述を追加*/
padding: 10px;
-webkit-box-sizing: border-box; //chrome safari 用
-moz-box-sizing: border-box; //Firefox 用
box-sizing: border-box;
}
.contents, #sidebar {
margin: 20px 0; 上下に20px 左右に0 の余白を取る
}

最大の幅を1200pxに設定
margin-rightとmargin-leftを使うことで中央に寄せてます。

PC用のデザインをcssを作成する

viewpointを使うと@mediaと接頭で宣言することで画面サイズに合わせたcssを適用することができます。


@media (min-width: 768px){
/*最小サイズ768pxで使いたいcssを記述*/
}

機種によって画面のサイズは変わりますが、768pxで切り替えるということが多いです。

以下の記述を追加しましょう。


@media (min-width: 768px){
.container:after {
display: block;
clear: both;
content: '';
}
.contents {
float: left;
width: 70%;
margin-right: 2%;
}
#sidebar {
float: left;
width: 28%;
}

contentsクラスとidのsidebarの幅の合計が「width70%+margin-right2%+(sidebarの)width28%=100%」100%になるようにします。

そうすると以下のようになります。

floatを使うとcontentsとsidebarが横並びになりました。

.containaer:afterが何をしているかというと、ブロックの高さを作っています。

clear: bothは「左寄せ、または右寄せされた全ての要素に対する回り込みを解除」を行います。


.container:after {
display: block;
clear: both;
content: '';
}

floatを使うときはclearfixを使うことで高さを保ちます。

メニューとタイトルを作成する

サンプル記事を作っておこう

テンプレートを作成するときに表示を確認するためのサンプル記事が必要になってくると思います。
手動で用意するのは途方もなく時間がかかるので、プラグインを使いましょう。
Really Simple CSV Importer」というものになります。
使い方はこちらを参照してください。

ナビゲーションメニューををfunctions.phpに記述します。


//カスタムメニュー
register_nav_menu( 'header-nav', ' ヘッダーナビゲーション ' );
register_nav_menu( 'footer-nav', ' フッターナビゲーション ' );

これを追加することで「外観」→「メニュー」が使用できるようになります。

メニューが出ないときは?

・register_nav_menuを追記しても表示されないときは
管理者でログインしてみましょう。

・ファイル名が合っているか。 function.php☓ functions.php⭕

今回はここまでです。

今日使ったこと

WordPressの関数

・get_header()→ヘッダーの呼び出し
・get_footer()→フッターの呼び出し
・register_nav_menu( ‘[呼び出し名]’, ‘ [ナビゲーション名] ‘ );

参考サイト:
https://plusers.net/
https://bazubu.com/how-to-insall-wp-in-mamp-23798.html