WordPressのテーマ作成でPHP、CSS、jQueryの勉強をする

今までいくつも子テーマを作ってサイトを作ったりしましたが、あるサイトのために全く新しくテーマを作りました。
WordPressだけでなくXOOPS CubeやNetCommonsでもテーマはいじってきましたが1から作るのは初めてでした。自分で作ってみると今まで知らなかった色々なことが分かりWordPressの勉強になりました。また、これからPHPやCSSやjQueryを始める方には自分でテーマを作ることでかなり勉強になるのではないかなと思ったのでそのことについても書きます。

WordPressのテーマを作る最小構成とは

WordPressのテーマを1から作るにあたって、検索しました。そしてこの2つのサイトを参考にさせていただきました。

最小限のファイルでテーマを作成してみる

テーマの作成 WordPress Codex日本語版

これらを読んでまず必要なファイルは、

index.php
style.css
screenshot.png

の3つと言うことが分かりました。

フォルダを作って、screenshot.pngを作成する

まずは wp-content/themes/ の下に今回作るテーマのフォルダを作ります。ryus というフォルダを作りました。

screenshot.pngは無くても機能的には問題ありませんが、あった方が分かりやすいので作ります。推奨サイズは 880x660px ということです。

普通はそのテーマでWordPressを表示した状態をscreenshot.pngにするのだと思いますが、まだどんな外観にするかとかが決まっていないのでとにかくこのテーマが何か分かる適当な画像を作りました。

これを ryus フォルダに screenshot.png という名前で保存します。

最新のtwentyfifteenなどからコードをコピーしてみた

次に index.php を作ります。とりあえずこのテーマではトップページに投稿が表示されるだけの機能を持たせたいと思います。
最小限のソースをtwentyfifteenや他のテーマからコピーして作ってみました。

全部で18行の短いコードです。これを ryus フォルダに incex.php という名前で保存します。

style.cssを作成する

最初は特にCSSの指定もする予定はないのですが style.css はテーマに必須のファイルですので作成します。

Theme Name フォルダの名称
Theme URI テーマのuri 
Description テーマの説明
Author 著者。wordpress.comのユーザー名が推奨されているが、本名でもかまわない。

とりあえずCSSの記述は何も無くても大丈夫です。

これを ryus フォルダに style.css という名前で保存します。

これで ryus フォルダには、

index.php
style.css
screenshot.png

が揃いました。

インストールして見てみる

ダッシュボード 外観>テーマ をクリック

こんな感じで今作った ryus テーマが表示されています。

有効化してみます。

表画面を見るとなにもデザインされてはいないけれども投稿が全部表示されました。これが今作ったテーマ ryus の表示です。

ここでソースを見てみたのですが、<title>タグがありません。先ほどtwentyfifteenからコピーしたときの、

この行で<title>タグを出力しているはずなのですが。調べてみたところ、この wp_head() でTitleを表示するには、twentyfifteenのfunctions.phpで行っている

という記述が必要なようです。ryusフォルダにfunctions.phpを作成して、この行をコピペして保存しました。すると、

こういう感じのタイトルが表示されました!

ここまで作った ryus テーマを使ってWordPressやPHP、CSS、jQueryの勉強をしてみたいと思います。

CSSをいじってみる

ではちょっとCSSの練習ということでいじってみたいと思います。style.cssを開いて、

このように書いて、表示すると、

こんな感じになりました。だいぶ変わりましたね。こんな感じでどんなCSSの記述をすると表示がどのように変わるのかがわかるのでCSSの勉強をこれからしようとする場合などによいかなと思います。

PHPをいじってみる

では次にPHPをいじってみたいと思います。

WordPress私的マニュアル 関数 : 目次

から、関数を参照して表示してみます。

the_author – 投稿者名を表示する

を使って、

このようにしてみます。表示すると、

著者名が表示されました。

WordPress関係の関数だけで無く普通にPHPを書いて試せますので、

とか書いて年月日を表示したり、if文を書いてみたり色々試してみることが出来ます。

functions.php でもPHPを書いてどのように動作するのかを試すことができます。

以前blogで書いた、font-awesomeを使ってタイトルにマークを追加しています。

my_scripts でこのテーマにfont-awesome用のファイルをリンクして、ryus_h2_addで、the_titleにfont-awesomeのスマイルマークを追加しています。

これで表示すると、

こんな感じになります(^^)/

jQueryを勉強する

jQueryを勉強してみましょう。まず、functions.phpjQueryを使うための記述を追加します。

先ほど作った my_scripts にjqueryを使うためのコードjQueryを記述するためのファイルを追加します。

(昨日のblogと内容がそっくりですが)

そして、ryus テーマフォルダに js というフォルダを作って ryus_custom.js というファイルを作ります。jQueryはここに記述して試すことが出来ます。

単純に、

こんな感じで記述して、再読み込みすれば

このようにアラートが表示されます。

もうちょっとちゃんとした感じのjQueryを書いてみます。

index.php

このような記述を追加して表示します。

こんな感じになります。

ryus_custom.js
 を、

このように変更します。これは idがopenclose となっているdiv要素をクリックしたときに、最初は表示されていない idがenter というdivを表示したり、隠したりする処理です。

この状態で

]

クリックすると、

このように OPEN  CLOSE になり、隠れていた 入り口はこちら が表示されます。再度 CLOSE をクリックすると

CLOSEOPENになり、表示されていた文字が隠されます。

こんな感じで色々とjQueryを試してみることができると思います。

まとめ:最小テーマを作ってみてわかったこと

分かったのは案外少ないファイルでテーマが一応表示されるのだなということです。また今までは子テーマにしていじりたいところだけをいじっていましたが1から自分で作るとwp_head()がちゃんと使うために必要な記述があったりと、色々知ることが多かったです。

最小のテーマは ryus こちらにzipファイルを置きましたので、試してみたい場合はダウンロードして触ってみてください(^^)/

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/ 無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る