DESIGNABOUTSKILLSWORKSBLOGPRICECONTACTホームブログwebたったこれだけ!超簡単WordPressテーマ自作手順(ホームページ編)たったこれだけ!超簡単WordPressテーマ自作手順(ホームページ編)webどうも、ハヤタコウヘイ(@hayatastic)です。今回は宇宙一簡単なWordPressテーマの自作手順を説明します。この記事を書こうと思ったかと言うと、僕自身初めてオリジナルWordPressテーマの作り方を調べた時に、初心者向けと謳っていても難しく感じる記事が多かったからです。ほんとに初めてWordPressテーマを自作するという方が見ても理解しやすいように、最低限これだけあれば機能するという部分だけをかいつまんで説明します。詳しくWordPressのことを勉強したい方はほかのブログを見てね。いうわけで、この記事を読めば初めての方でもあっという間にWordPressテーマを自作できるよ!index.htmlとstyle.cssを作るまずは元となるホームページをhtmlとcssで作りましょう。これがないと始まりません。あ、あらかじめ言っておきますが、この記事はhtmlとcssは書けてWordPressも使ったことあるけど、テーマのカスタマイズや自作はしたことないという人向けの記事です。わからない人は勉強してね。ここで気をつけないといけないのは、WordPressはstyle.cssをテーマフォルダの直下に置かないと動作しないということです。cssというフォルダを作ってその中に入れてはダメです。ファイル名もcommon.cssでもbase.cssでもダメです。style.cssで作成してください。content="ここに説明が入ります。〜〜ここにいろいろ入ります。ここにメニューが入ります。ここにメインコンテンツが入ります。サイドバーがある場合はここにサイドバーの内容が入ります。ここにフッターの内容が入ります。</footer></body></html>↑今回はサンプルとして上記の簡単なhtmlをWordPress化していきます。サイドバーはないよ!って人はそこらへんは読み飛ばしてください。style.cssにテーマの情報を記入するさて、まず最初にstyle.cssにWordPressとして必要な情報を記入します。“UTF-8”;の下に記入してください。これでstyle.cssは完成です。テーマのライセンスのURIなどがありますが、必須ではないのでお好みでどうぞ。header.phpを作るそれではindex.htmlを必要なパーツに切り分けていきます。header.phpはその名の通りヘッダーの部分になります。ぶっちゃけ切り分けなくてindex.phpだけでも動作するんですが、パーツ分けして管理しないとあんまりWordPressで構築する意味ないので、切り分けましょう。index.htmlの1行目から共通ヘッダーとして使いまわしたい部分をカットして、新たにheader.phpとして保存します。?>と記入してください。?そーゆーもんだからです。?>に変えてください。これでheader.phpは完成です。〜〜ここにいろいろ入ります。ここにメニューが入ります。</header>↑こんな感じになってれば大丈夫です。各タグの意味は使われてる場所を見ればわかると思うので、説明は省略します。footer.phpを作る次はフッターとして使いまわしたい部分をfooter.phpとして保存します。普通は<footer>から</html>までだと思います。?>と一緒で、かならず必要なものということだけ覚えていれば大丈夫です。ここにフッターの内容が入ります。?></body></html>↑footer.phpはこんな感じです。sidebar.phpを作るサイドバーがある方はsidebar.phpが必要です。<aside>から</aside>までの部分をsidebar.phpとして保存しましょう。ここにサイドバーの内容が入ります。</aside>↑一応こんな感じです。説明するまでもないけど。index.phpを作るさて、いよいよ本体であるindex.phpを作ります。パーツごとに切り分けたので、index.htmlの中身は<main>から</main>までしか残ってないはずです。このままだと当然表示されないので、テンプレートタグと呼ばれるWordPressを動作させるためのタグを挿入していきます。下記のようにテンプレートタグを挿入してください。ここにページの内容が入ります。?>↑こんな感じです。以下、各タグの説明です。?>header.phpを呼び出すタグ。?>sidebar.phpを呼び出すタグ。?>footer.phpを呼び出すタグ。これでトップページができました。page.phpを作るさて、最後に固定ページ用のテンプレートパーツであるpage.phpを作ります。WordPressでサイトを運用する場合はこの固定ページを追加することで子ページを増やしていきます。下記のような感じで作成してください。?>↑たったこれだけです。チョーカンタンですね。?>ざっくり言うと、ここに書いたWordPressの処理を実行するよー!というタグです。これを書いてないと内容が表示されません。?>実際に固定ページの内容を表示するタグです。ここに、ダッシュボードで編集した内容が表示されます。?>これもざっくり言うと、WordPressの処理はここで終わりだよー!というタグです。これも忘れずに記述してください。おわりに以上、とりあえずこれだけあれば動くよ!という部分だけをかなりざっくりと説明してきました。他にもいろいろあるんで、カスタマイズしていく中でちょっとずつ調べていけばいいと思います。質問・ご意見・ご感想は@hayatasticまでお願いします!では次回はブログ編を書きます。CONTACTお問い合わせお問い合わせはメールかSNSでどうぞ。