Wordpressオリジナルテーマづくり(独学編)
今回は、ポートフォリオサイトをオリジナルテーマで初めて作ったときの勉強記録を付けたいと思う。
2ヶ月ほど前に約1か月かけて、ポートフォリオサイトを作成した。Wordpressはほとんど触ったことがなかったのだけれど、ポートフォリオサイトという特性上、更新とお問い合わせができるようにするために、Wordpressを利用した方が都合がいいと思ったからだ。
その時にだいぶ苦労しながらテンプレート化したので、脳内整理の意味もこめて、まとめていく。テンプレート化自体は一週間程度かかった。
この記事の目的は、再び、Wordpressでオリジナルテーマを作成するときに、流れを理解できるようにすることと、何を検索したのかを確認できるようにすることである。
HTML/cssでサイトを作ることが出来ること、自分のサーバーを持っていることが前提となる。
環境構築
まず、ワードプレスとは何だというレベルだったので、本を参考にワードプレスを自分のパソコンで使えるようにした。まず、こちらの本。
最初の方をちょこちょこ読みながら、Wordpressのインストール方法や実際の画面の説明などを理解。Wordpressの本番環境を構築。(前提として、自分のサーバーを持っている)
ただ、実際に作るときはローカル環境が必要ということで、ローカル環境の作り方を調べる。Windowsを使用していたので、XAMPP(ザンプ)がいいらしいとなり、検索。インストールの仕方については、調べるとすぐに、かなり分かりやすいサイトを見つけることができた。Wordpressを使えるようにするのも同じく分かりやすいサイトがあった。
事前準備
まず、HTML、CSSで作ったサイトを用意する。JSも実装しておく。
これは、人それぞれだが、私は、PHPが全く分からなかったので、progateをちょっとだけやった。あと、データベースの概念も分かった方がいいと思って、MySQLもちょこっとした。けれど、progateをしたからといって、理解できるものではなかったので、勉強のきっかけ程度の認識になると思う。(個人的見解)
特にデータベースは、バックアップをとるのを忘れていて、データがクラッシュしたときに、ちょっとでも分かっていたら、検索の方法とかももっとスムーズにできたのかなーと思っている。
Wordpressの構成を理解する
まず、自分のサイトのどのページがWordpressの固定ページにあたるのか、投稿ページにあたるのかを考える。初めてなので、最低限のサイトができるようにしようと思い、About、Contactを固定ページ(page.php）とした。
ｗorkの投稿一覧を（achieve.php）、各投稿ページ(single.php）を作品一つ一つの説明とした。
phpファイルを準備する
まず、空でいいので、最低限のphpファイルを全て準備する。絶対に必要なのが、(header.php)(footer.php)(function.php)。あとは、（index.php)(page.php)(achieve.php)(single.php)。それから、同じ階層に（style.css)。
phpファイルを作成していく
（header.php）に最低必要なコードは下記。
<head>
<?php wp_head();?>
</head>
//headerの内容//
HTMLのheaderの内容をコピー＆ペースト。aタグなどのリンクにもPHPのコードを使用。
<?php echo esc_url(home_url('//')); ?>
（footer.php)も同様。最低限必要なコードは下記。
<footer>
//footerの記述//
</footer>
<?php wp_footer(); ?>
それから、imgタグにも置き換えのコードが必要。階層に注意。
<?php echo get_template_directory_uri(); ?>（index.php)（page.php)などの固定ページについて。
基本的に、リンクへのタグとimgタグの置き換えを行う。それから、headerとfooterを読み込めるようにする。イメージは下記。ただし、Wordpressならではの更新が行われるnewsや、ブログの更新一覧を表示したい場合は別途コードが必要となる。
やりたいことを一つずつ検索していくと割とスムーズに見つかる。
また、お問い合わせフォームはWordpressのプラグインを利用して、作成すると、セキュリティもしっかりしているし、ある程度オーソドックスなものができた。これも検索ですぐ見つかる。自分で作成する方法もある。
<?php get_header();?>
//ページの内容のHTML//
<?php get_footer();?>(single.php)について
今回は、ポートフォリオなので、single.phpの内容はwordpress内で編集することにする。wordpressで編集したものが表示されるようにsingle.phpを作成しなければならない。single.phpについては、様々なやり方があると思う。
style.cssの作成
最良かどうかは分からないが、私の場合、style.cssには、reset.cssの内容と、common.cssの内容(headerとfooter）をコピペ。phpファイルと同階層にファイルを置く点が注意。
function.phpについて
かなり重要なファイルになるので、何か変更するときは、必ずバックアップが必要。記載内容はhtmlファイルのcssファイルの読み込みにあたるコード。
簡単にまとめると、about_page.phpでは、about.cssを読み込む、ように設定するコードを書くということ。それから、JSの読み込み、JQの設定もこちらにコードを書いた。
それから、細かい設定もこちらに書くことになると思う。私の場合は、投稿のアーカイブページを作成することや、archiveページにおける表示件数の設定などを指定するコードを加えた。
これらも検索で同じことをしている方を見つけることができる。
ローカル環境から本番環境への移行
まず、バックアップは必ずとっておくこと。データベースがクラッシュした場合、復元する方法を探すのは困難だし、戻らない場合も十分にありえる。移行に関してもいくつか方法があって、プラグインでめちゃくちゃ簡単にできる方法もあるし、自分で設定していくやり方もあった。私はプラグインを使用した。
使用したプラグインは「All-in-One WP Migration」。使い方を分かりやすく説明してくれるサイトもすぐに見つかるし、実際に使用したときも分かりやすかった。
まとめ
今回は、おそらく最低限の機能を備えたオリジナルテーマになったと思う。
実際はもっと複雑なことをしていくと思うし、私自身もページネーションを入れたり、カテゴリ別にページを分けたいという思いが出てきている。
HTML/cssサイトは変になったところを自分で見つけるのが比較的簡単だ。しかし、Wordpressでおかしな見た目や全くページが表示されなくなった場合に、何が問題なのかを自分で見つけるのが難しいと思った。
おそらくこの記事を読んだだけでは、オリジナルテーマを作ることはできない。各項目で行うことに関して、自力で検索する必要がある。しかし、
再び、初心者がWordpressのサイトを作るときに、この記事を読み直して、ざっと作り方がおさらいできるようになっていたら幸いだし、自分自身もそうするつもりである。