【WordPress】制作知識ほとんどなしからのオリジナルテーマ作成にチャレンジ！！|Knowledge Base

公開日：2019(平成31)年4月15日／最終更新日： 2019(平成31)年4月28日

WordPressといえばいろいろな表示・表現ができるテーマと機能を補完するために使うプラグインがほぼ無料で自由に使えて独自のサイトが作れるのが魅力です。

とはいえ最近ではWordPress自体は無料で入手・インストールできたとしても、テーマやプラグインにはすごい？機能を付加した有料のものや有料オプションがあるものが多数リリースされるようになりました。

それだけWordPressユーザーが増え、より簡単に、より他のサイトと差別化できるノウハウが商売ネタになりつつある証拠なのだと思います。

が、それらテーマやプラグインも汎用（誰がどんな環境で使っても不具合が出にくく、メニューから簡単に独自の機能の有効化／無効化などができる）なので、中身を見ればifififif…つまりもしも・・たらの連続になっています。

テーマについて経験上ではほとんど使わない機能が満載といっても間違いはないのでは？と思います。中にはテーマの機能にあったのにわざわざ同じ機能をプラグインで補完していたことに後々気づいたりすることも（笑）。

効果は訪問してくれた方に「なんだこのサイト全然開かん！えーーい閉じちゃえ」と迷惑をかけることが少なくなる以上に、サイトの表示が速くなる＝サーバーの処理も少なくなるということなのですから、すごいアクセス数のあるモンスターサイトでも帯域制限やアクセス制限がかかりにくくなるというメリットもあります。

前置きがいつものごとく長くなりそうなのでこの辺にして・・・。結局は個人が個人のために使うテーマなのですから、必要なものだけを含めるようにすればいい！！ということで汎用テーマを脱出し、自身のサイトに合ったものを作ってみよう！！というのが今回の主旨です。

今回はカスタマイズごとに記事を分けず、残件を表示しながら解決して更新していくという形にしていきますので、最終的にはこれで私にとってのベーステーマは完成！！という記事になりますから、興味ある方は時々覗いてみてくださいね。

記事数も１００記事超程度なので、一般的に言われる速度が落ちたと感じる位のボリウムのサイトですからちょうどいい！という安易な発想です（笑）。この記事が完成する＝独自テーマが完成すると同時にコピーサイトは恐らく閉鎖すると思いますのでそれまでは発展途上と考えていただければと思います。

私はこのサイトでいろいろなプラグインを紹介したり、テーマカスタマイズの方法を紹介したりしていますが、実際に１からテーマを作成した経験なんてありませんから、同じようなスキルの方の参考になれば幸いです。

それでは始めていきましょう！！

ベースとなるテーマをどうするか？

最低限必要なファイルやコードすらわかっていない状態なのですから、当然ベースとなるテーマは必要になります。

でもいろいろと機能が追加されていて、様々な環境でも不具合なく動作するようにしてあるWordPress公式サイトにあるテーマを使ったのでは今までと同じ「既存テーマのカスタマイズ」になってしまう・・・。

そんなときには何でも載ってるインターネットということで探し当てたのがPlusersというサイト。

順番に必要な部品の構造やコードの意味、工夫の仕方など本当にいろいろなことを事細かく紹介していただいていて、しかもそこまでの完成版をダウンロードして使うこともできるようになっているという親切なサイト（私の紹介記事もこれを目指そう！と思える位のすばらしいサイト様です）。

これを元にテーマの作成を進めることにしました。

無事に設定が終わり、前述したように既存サイトの記事を完全コピーして表示した結果・・・とっても速い！！第一印象です。

キャッシュをクリアした状態での表示速度は

元サイト・・・トップ：4.5～4.8秒　記事：2.8～4.0秒
新サイト・・・トップ：0.6秒～1.0秒　記事：0.5～1.0秒

WordPressの表示ってこんなに速かったんですね（驚）。

当然ここからいろいろなもの・ことを追加していくので表示速度が最終的にどうなるかというのは未知数ですが、まずは凄く期待が持てそうな値が出ました。

必要なものを追加したり、不要なものを調整したりしよう

上で設置できたのはサイトが表示される、個別の記事が表示されるといった本当に基本部分だけですので、ここからが本番です。

自身で使用するだけのためのテーマですから汎用ではありませんので、テーマカスタマイザーで何やらを変更するなんて挙動は必要ありません。必要なものを必要な分だけ追加していきます。もちろんこれによって不要になったり調整が必要だったりする部分もありますので、可能な限り赤裸々に書いていきます。

大半は長らく利用させていただいたSimplicity2テーマや最近見つけたWhite Tigerテーマ~~からパク~~を参考に進めていきます。

優秀なテーマにあるfunctions.phpから追加した方がいいと思われるものを追加

//URLの正規表現
define('URL_REG', '/(https?|ftp)(:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)/');

// RSS2 の feed リンクを出力
add_theme_support( 'automatic-feed-links' );

//テキストウィジェットでショートコードを使用する
add_filter('widget_text', 'do_shortcode');

//generator を削除
remove_action('wp_head', 'wp_generator');
//EditURI を削除
remove_action('wp_head', 'rsd_link');
//wlwmanifest を削除
remove_action('wp_head', 'wlwmanifest_link');

//ヘッダーに以下のようなタグが挿入されるWP4.4からの機能を解除
// remove_action( 'wp_head', 'rest_output_link_wp_head' );

//セルフピンバック禁止
function sp_no_self_ping( &$links ) {
$home = home_url();
foreach ( $links as $l => $link )
if ( 0 === strpos( $link, $home ) )
unset($links[$l]);
}
add_action( 'pre_ping', 'sp_no_self_ping' );

//投稿ページ以外ではhentryクラスを削除する関数
function remove_hentry( $classes ) {
if ( !is_single() ) {
$classes = array_diff($classes, array('hentry'));
}
//これらのクラスが含まれたページではhentryを削除する
$ng_classes = array('type-forum', 'type-topic');//ここに追加していく
$is_include = false;
foreach ($ng_classes as $ng_class) {
//NGのクラス名が含まれていないか調べる
if ( in_array($ng_class, $classes) ) {
$is_include = true;
}
}
//含まれていたらhentryを削除する
if ($is_include) {
$classes = array_diff($classes, array('hentry'));
}
return $classes;
}
add_filter('post_class', 'remove_hentry');

//WordPressのバージョンを小数で取得する
function get_wordpress_version(){
return floatval(get_bloginfo('version'));
}

Simplicity2テーマのfunctions.phpへ必要であろうものを追加しました。

セルフピンバックの防止、WordPressの情報表示（これ必須らしい）から必要ないものを削除、テキストウィジェットでショートコードが動作するようにする・・・など不都合が生じそうなものを選択しました。

ヘッダー回りであった方がいいものを追加

一応SEO?を意識して必要なタグが出力されるように設定を変更しました。

まずはいろいろなテーマから必要なものを追記・調整しました。中でも検索エンジンに「こんなページですよ！」と伝える「meta disctiption」と「meta keyword」の出力は必須です。

ベーステーマでは本文の抜粋項目に内容があればそれを、なければ本文の冒頭をという条件で「meta disctiption」が出力され、タグの内容を「meta keyword」として出力されるようになっていましたので、有料テーマなどで採用されている以下の仕様に変更しました。

抜粋とキーワードを入力できる独自のカスタムフィールドを作る
１に入力値があればそれを、なければ本文文頭を「meta disctiption」として出力
１に入力値があればそれを、なければ「meta keyword」は出力しない

「meta keyword」に関してはGoogleに限って公式にページ内容として参考にはしていないと発表されていますのであまり厳密にタグやカテゴリーから出力するというのは不要かなぁと勝手に判断しました（検索順位決定には参考にされなくても、キーワードと本文内容の相違でかけ離れた単語が設定されていることでマイナスになることもあるのでは？と思ったので・・・）ので単純に入っていなければ出力しないということにしました。

これはWhite Tigerのファイルとコードを流用（完全にコピペプログラマーです・・・）。

使用するのは「seo_fields.php」というファイル。これをテーマディレクトリへそのまま転送します。

そしてfunctions.phpへ以下を追記

// SEOフィールドの関数
locate_template('seo_fields.php', true);

さらにheader.php内の「個別ページ用のmetaデータ」となっているところにある

<?php setup_postdata($post) ?>
<meta name="description" content="<?php echo strip_tags( get_the_excerpt() ); ?>"/>

<?php if ( has_tag() ): ?>
<?php $tags = get_the_tags();
$kwds = array();
foreach($tags as $tag){
$kwds[] = $tag->name;
} ?>
<meta name="keywords" content="<?php echo implode( ',',$kwds ); ?>">
<?php endif; ?>

というコードを

<?php custom_seo_meta();?>

へ置き換えて（要するに「seo_fields.php」内の処理に変える）完了。

これで投稿や固定ページに「SEO対策」という窓ができ、そこに入力たものが上の条件でヘッダー内に出力されるという動作が完成しました。

ページトップへ戻る、ホームへ戻るボタン設置

これ今やること？と思いましたがいつやってもいいことなので（笑）。よくあるページ先頭に戻るボタンとサイトトップページへ戻るリンクの設置です。

よく使われるのはスクリプトを使ってある程度スクロールしたときに表示され、クリックするとヌルーーっと移動するものですが、ページトップへはキーボードの「home」ボタンを押せばいい話ですし、ページ先頭についてもスクロールバーで何とかなるものですからhtmlとCSSだけで何の飾り気もないアクションのものを設置しました。

header.phpの「</head>」という記述のすぐ下へ

<div id="header">

という行を追加して、同じheader.phpの末尾へ

<div class="back">
<a href="#header"><img src="<?php echo get_template_directory_uri() ?>/images/top.png" /></a>
</br>
<a href="<?php echo home_url( '/' ); ?>"><img src="<?php echo get_template_directory_uri() ?>/images/home.png" /></a>
</div>

を追加します。
※top.png、home.pngという画像ファイルを作って、テーマフォルダのimagesフォルダ内へアップロードしておいてくださいね。

マーク画像はCMANで作成すると簡単です。

あとはテーマのCSSへ以下を追加すれば右側に固定表示されるボタンの設置は完了です
※モバイル閲覧時にはボタンが表示されないようにしています

/* 右にホームとページトップへのボタン */
.back{
position:fixed;
bottom:100px;
right:0px;
z-index:999;
}

@media screen and (max-width: 768px){
.back { display: none;}
}

.back:hover {
opacity: 0.7;
}

一応マウスオーバーすると少し薄くなるようにしたのでこんな感じでいいでしょ！というボタンです。

ウィジェットエリアの追加

基本テーマではウィジェットエリアがサイドバーのみですので、以下の部分にウィジェットを追加できる場所（ウィジェットエリア）を作りました。

本文の記事下（関連記事の上）

ここへはアドセンスのディスプレイ広告をダブルレクタングルで表示することと、同じくアドセンスの関連記事表示をするために設置します。

本文タイトルの下

お知らせコンテンツを入れたり、経験上広告を入れるのに便利で効果的だと思われる場所です。

どこに表示させるのも手順は同じなので１つ覚えておくとどんなテーマでも応用できます。

元々のサイドバー用のコードを流用します。
テーマのfunctions.phpに含まれているコードは

//サイドバーにウィジェット追加
function widgetarea_init() {
register_sidebar(array(
'name'=>'サイドバー',
'id' => 'side-widget',
'before_widget'=>'
<div id="%1$s" class="%2$s sidebar-wrapper">',
'after_widget'=>'</div>
',
'before_title' => '
<h4 class="sidebar-title">',
'after_title' => '</h4>
'
));
}
add_action( 'widgets_init', 'widgetarea_init' );

これを

//投稿タイトル下にウィジェット追加
function title_bottom_widgetarea_init() {
register_sidebar(array(
'name'=&gt;'記事本文下',
'id' =&gt; 'titlebottom-widget',
'before_widget'=&gt;'
<div id="post-top-widget" class="top-widget sidebar-wrapper">',
'after_widget'=&gt;'</div>
',
'before_title' =&gt; '
<h4 class="topwidget-title">',
'after_title' =&gt; '</h4>
'
));
}
add_action( 'widgets_init', 'title_bottom_widgetarea_init' );

にすれば本文タイトル下用になります（変更しているところを見ればお分かりになるかと）

同じようにして本文下用も作成しておきます。そうすると「外観」→「ウィジェット」を開いたとき新たにエリアが追加されているのが確認できます。

次にsidebar.phpにある

<?php dynamic_sidebar( 'side-widget' ); ?>

のIDをそれぞれにして、single.phpの任意の場所へ挿入すればOK。挿入場所によっては表示に不都合が出る場合もあるのでCSSで調整して完了。

できたら適当なものをウィジェットで挿入してみるといいでしょう。私の場合は画像を挿入して確認しました。

外部サービスのプリフェッチ設定

広告やブログ村などのランキングなど外部からデータを引っ張って表示するなどといったコンテンツを入れていくと外部とのやり取りが発生するのでどうしても速度に影響します。これを少しでも軽減させるために先読みさせるようにします。

これを「プリフェッチ」と言います。厳密には最初にアクセスされたときに「先読みしとけよ！」と指示するものなので、そのページしか見ない一見さんには全く効果がない方法ではあります。が、少しでも・・・で設置しておきます。

私の場合のあらゆる参照先を追加したものはこちらです。

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//pagead2.googlesyndication.com">
<link rel="dns-prefetch" href="//googleads.g.doubleclick.net">
<link rel="dns-prefetch" href="//googleads4.g.doubleclick.net">
<link rel="dns-prefetch" href="//tpc.googlesyndication.com">
<link rel="dns-prefetch" href="//www.gstatic.com">
<link rel="dns-prefetch" href="//d7x5nblzs94me.cloudfront.net">
<link rel="dns-prefetch" href="//d7x5nblzs94me.cloudfront.net">
<link rel="dns-prefetch" href="//www.facebook.com">
<link rel="dns-prefetch" href="//s-static.ak.facebook.com">
<link rel="dns-prefetch" href="//static.ak.fbcdn.net">
<link rel="dns-prefetch" href="//static.ak.facebook.com">
<link rel="dns-prefetch" href="//connect.facebook.net">
<link rel="dns-prefetch" href="//twitter.com">
<link rel="dns-prefetch" href="//cdn.api.twitter.com">
<link rel="dns-prefetch" href="//p.twitter.com">
<link rel="dns-prefetch" href="//platform.twitter.com">
<link rel="dns-prefetch" href="//cdn-ak.b.st-hatena.com">
<link rel="dns-prefetch" href="//cdn.api.b.hatena.ne.jp">
<link rel="dns-prefetch" href="//b.st-hatena.com">
<link rel="dns-prefetch" href="//blogmura.com">

header.phpのheadタグ下（なるべく上の方がいいようです）へ挿入しました。

・・・ここまで来ても全く表示速度は衰えず・・・何が速度を遅くするんだ？？って感じです。

トップページへ視差効果のあるヘッダー画像を表示

トップページのグローバルメニュー下にキャッチーな画像を入れたいなぁということで設置しました。

ただ単純な画像では芸がないので、今流行りの？視差効果のあるコンテンツとしました。

こちらもスマホ表示では必要ないですし、個別ページでも必要ないのでそのように条件を設けました。

header.phpのグローバルメニュー表示下へ追加するコード

<!--ヘッダ画像（フロントページかつパソコン表示のみ）-->
<?php if(wp_is_mobile()): ?>
<?php else: ?>
<?php if(is_front_page()): ?>
<!--ヘッダ画像（視差効果）-->
<aside id="site-top-image" class="box" style="background-image: url(<?php echo get_template_directory_uri() ?>/images/header.png); "></aside>
<?php else: ?>
<?php endif; ?>
<?php endif; ?>

対するCSS

#site-top-image {
min-height: 400px;
padding: .5%;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}

これでちょっとトップページが華やかになりました。

後々この部分はスライダーにしてもいいし、単純な画像にしてもいいし、なしでもいいし・・って感じです。

シンタックスハイライターを導入

私のサイトではコードの紹介などをする機会が多いので、コード表示とコピーしたときの不具合を最小限にするためにシンタックスハイライターを使います。これには動作の軽いprism.jsを導入しました。

【WordPress】投稿や固定ページ内のコード表示をプラグインなしで変更する方法（prism.jsの使用方法）

xmlサイトマップの追加

xmlサイトマップとは検索エンジン向けのサイトマップのことを言います。これについてはいろいろなプラグインが出ていますが、今回は何といってもできるだけ内製化しよう！が目標なので

プラグインなしでWordPressサイトにサイトマップ(sitemap.xml)を作成する方法

を参考に出力できるようにしました。

記事数がとんでもない数になったらさすがに一覧表示ではだめかも知れないのでそれはその時考えることにします（笑）。

記事のアクセス数計測とそれを元にした人気記事ウィジェットの追加

だんだん細部になってきました。アクセス数計測とそれをウィジェット表示させるプラグインで有名なのは「WordPress Popular Post」。恐らくほとんどの方が使ったことがあると思います。が、このプラグインは独自にアクセス数を計数し、それを期間区切りで引っ張り出してくるのでデータベースも肥大化する傾向となりますし、膨大なデータから引っ張り出して集計して・・・という動作をしますからとても重たいプラグインだと思います（これに限らずアクセス計測系のプラグインは致し方ないと思います）。

まあ大まかなアクセス解析についてはGoogle Analyticsで事足りますから、できれば軽くて単純な目安になればいいということで、ベーステーマとさせていただいたサイトで紹介されている記事を参考（そのまま）にさせていただきました。

記事のアクセス数をプラグインなしで計測しWordPressの管理画面に表示する

そしてその数から人気記事をウィジェット表示できるようでしたのでそちらも使わせていただきました。

プラグインなしで画像付きの人気記事をWordPressのウィジェットに追加する

・・・ここまで来て何となく・・・ではありますが、White Tigerテーマはこのサイトの方法をかなり利用しているような・・・そんな気がしてきました。

記事修正で更新日の更新を選択できるようにする

最近のテーマではすっかり定番の機能となりました。これを実装します。

と言っても

WordPress記事を修正した時に更新日を変更するかしないかを選択できるようにするカスタマイズ方法

で紹介されている方法を行っただけです（笑）

SNSのシェアボタン設置

ベーステーマのサイトに掲載されていたものを導入し、「LINE」と「Pocket」を追加、デザインはホーバー時のニュルっと動くものを除きWhite Tigerのものを流用しました。

シェア数を取得することもできますが、各SNSから情報を取得する必要があり、表示速度に影響がでますので今回はパスしました。今後必要になればコード追加し、「SNS Count Cache」プラグインで読み込みをキャッシュするようにしようと思ってますが、「シェア数が多いからシェアしとこ！」という風に訪問者は考えるのか？」という疑問が残るので当面はこのままにします。

Youtube動画の高速読み込みと表示の拡大

【表示高速化】WordPressサイトへYoutube動画を埋め込んだページの表示が遅くなるのを防ぐ方法

で紹介している私の記事の内容です。

速度の最大化を考えると、Youtube動画のある投稿や固定ページにだけスクリプトを設置すればいい話なのですが、サイトによって使うシーンが様々なのでフッターに設置しました。

コメント欄の設置

ここまで来て初めて気づいたのがこの項目。意見を求めないなら必要ない機能ですが、これも必要な時に追加・・では具合が悪いので一応設置しておく感じです。

テーマのsingle.phpの本文下へ

<!-- コメント表示 -->
<?php comments_template(); ?>

を追加するだけでコメント機能が動くようになります。

ただデフォルトのコメント欄はちょっと残念な感じなのでいろいろなサイトで紹介されているカスタマイズ方法を参考にカスタマイズすればいいのですが・・個人的に機能が気に入っているので「wpDiscuz」プラグインを使用することにしました。

公開日と更新日の修正

これもベーステーマのサイトに掲載されていた内容です。検索エンジンに更新日を伝えるため、また、閲覧した方にいつの記事なのかを正確に伝えるために変更しました。

ここまで来て、テーマの作成って本当に大変なんだなぁと実感しました。無料で提供されている方は本当にすごいと思います。

内部・外部リンクのカード化

最近では有料テーマでもメジャーとなったカード形式の内部・外部リンク。ショートコードを使うものが多い中、Simplicity2ではURLを入力すると自動的にカード化される仕組みになっていて、これいいなぁ・・とパク参考にさせていただこうとしましたが私の知識ではエラーの壁を乗り越えられず断念。

どこかに参考が記事ないかといろいろ画策しましたが、プラグインなしで実装するもののほとんどが「はてなブログカード」を外部リンクに使う仕様。これ手軽なんですけどリファラーはすべて「はてな」になってしまうんですよね（困）。せっかくリンクしてそれ経由でアクセスされることがあるのですから、リンク先の管理者にも「どこから来たのかな？」を知ってもらいたいというもんです。

そこで今回はプラグインに頼ることにしました。有名なものに