WordPress-初めてのカスタマイズ
齊藤 直孝AppliotのホームページはWordpressを使用しているのですが、Wordpress自体は使用しているだけで、テーマやプラグインを活用だけでカスタマイズをしないで利用していました。
提供しているサービスのドキュメントページの右側に表示されるWidgetは不要ですし、そのためにドキュメントの幅が狭くなってしまうのが気に入らないので、今回、初めてWordpressのカスタマイズすることにしました。
この記事はその手順をまとめた内容になります。ちなみに、このWordpressのテーマは「MyWiki」というテーマを使用しています。
BEFORE
AFTER
1. 変更内容を調査する
調査したところ、個別のページはsingle.phpが呼び出されて、その中からsidebar.phpを呼び出している事がわかりました。
その調査の結果、この３ステップでやりたいことができる事がわかりました。
①子テーマを作成する
②single.phpを変更して、sidebar,phpを呼び出さないようにする。
③single.phpの表示エリアを画面いっぱいに広げる
2. 変更してみる
①子テーマを作成する
公開されているテーマのファイルをそのまま変更すると、更新した時に自分が行った修正が上書きされてしまうので、まずは子テーマを作成します。
wikiサイトは/var/www/wikiのフォルダにインストールしています。その下のwp-content/themesに「mywiki」があったので、「mywiki_child」を作成しました。
そして、関係がありそうなファイル5個をコピーしました。
| ファイル | 役割 |
|---|---|
| category.php | カテゴリをクリックした時に表示されるページ（後述します） |
| function.php | 子テーマに必ず必要なファイル。この後、中身はすべて差し替えます。 |
| sidebar.php | 右側の「検索」「最近の投稿」などを表示する時に動作しているファイル |
| single.php | 単一ページを表示する時に動作しているファイル |
| style.css | 子テーマに必ず必要なファイル。この後、中身は変更します。 |
続いてmywiki_childをmywikiの子テーマにする変更作業をします
function.php
中身をすべて差し替えます。
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>
style.css
一般的な子テーマのstyle.cssに差し替えます。
そして、親テーマのstyle.cssの下部に書かれていたcssをペーストしました。貼り付けたcssは省略しています。
@charset "utf-8";
/*
Theme Name: mywiki child
Theme URI: ★ テーマの公式サイトなどのURL（空欄でも可） ★
Template: mywiki
Description: ★ テーマの説明（空欄でも可） ★
Author: ★ テーマ作成者の名前（空欄でも可） ★
Tags:
Version: 0.1.2
*/
ここまでの設定で、「外観 」からwiki_childのテーマが選べるようになっているので、選択して表示をしてみると、親テーマと同じ内容が表示されるはずです。
②子テーマのsidebar.phpの中身を消す
sidebar.phpを空っぽのファイルにしてみたら、その部分が消えました! 空のファイルを残しておかないと、親テーマのsidebar.phpが参照されてしまうので、ファイル自体は消さないでください。
③ single.phpの表示エリアを修正する
single.phpの中身を見たらこの様になっていました。
赤く囲んだラインに「class="col-sm-8 clearfix"」と書かれています。これは、ホームページのデザインをいい感じにしてくれる「bootstrap」というライブラリの表現で、画面を12分割した中の8個分を描画エリアにするという事を示しています。おそらく、この部分で本文の表示エリアが画面の2/3になっているのではないかと思います。
ということで、これをcol-sm-12にしてみたところ、やりたかった修正が行えました。
3. 完成！！！
無事に、やりたかったカスタマイズを行うことができました。提供しているサービス画面の方でbootstrapを使用しているのでcol-sm-8が表示領域を決めていると解ったのでやり切る事ができました。知らなかったら完全に詰んでいました。
余談ですが、col-sm-8のsmにも意味があり、smは画面幅が540px以上のときは2/3の領域を利用して表示をするという意味で、画面幅が540以下（スマホなど）のときは、全画面表示になります。
single.phpを変更した結果がこちら
ついでにcategory.phpも変更しました。
