こんにちは。fsです。
今回からはWordpressのちょっと高度な開発テクニックを紹介していきます。
1からテーマを開発していくと、
「いろんなファイルをつくるの手間だな」
「決まり文句みたいな構文(if文など)書くのもめんどくさい😓」
「チームで開発するときは書き方も統一しないと😅」
こんな悩みが生じます。
そこでunderscoresというテーマを使って、
「Wordpressの基本的な部分から機能やデザインを肉付けする」
という作業をしていきたいと思います。
underscoresとは
underscoresはベーシックとなる機能だけ備えている開発者向けのWordpressテーマです。
1からテーマを作っていくのは楽しいですが、色んなファイルつくりコードを書いていくのは結構大変な作業であることは間違いありません。
underscoresを使えば、既にWordpressの基本的な部分が出来上がっているので、
「つけたい機能やデザインだけ追加していけばOK😏」
という優れものです。
underscoresで開発
それでは早速使っていきましょう。
テーマのダウンロード
まずunderscoresのウェブサイトにアクセスします。
テーマ名を記入し、ダウンロードします。
zipファイルでダウンロードされますので、PCの任意の場所に保管しましょう。
Localで開発環境を構築
続いてLocalを使い新しく開発環境を作ります。
※この記事で手順をまとめていますので、わからない方は以下をご参照ください。
Localを稼働させたら、管理画面に入り外観→テーマの順に選択します。
次に新規追加をクリックし、テーマのアップロードと続きます。
ダウンロードしたzipファイルをドラッグ＆ドロップし、インストールします。
新しくテーマが追加されているので、有効化します。
トップページを開いてみると、見た目は綺麗ではないですが（この時点では基本的なhtmlとcssだけです）、
- 固定ページ（Sample Page）
- 投稿ページ（日付、著者）
- カテゴリーページ
- コメント欄
- アーカイブページ
- カテゴリーページ
などWordpressサイトを作る上で一通りの機能がついていることがわかります。
あとは、それぞれのファイルをコードエディターで編集していけば、簡単にウェブサイトを仕上げていくことができそうです。
実際にテーマのファイルをコードエディターで開いてみると、
- トップページ（index.php）
- 固定ページ(page.php)
- 投稿ページ(single.php)
- パーツ化したファイル（template-parts）
- 機能を追加したファイル（functions.php）
など、各機能のファイルが整備されていることがわかります。
このテーマを使うことで、
- htmlファイルをphpファイルに変更
- 共通部分のパーツ化
- ループで繰り返し処理
などの作業を省くことができ、1からテーマを作るよりも簡単にウェブサイトの基礎工事ができるようになります。
あとはファイルをひとつひとついじって、肉付けしていくだけです。
まとめ underscoresで楽々Wordpress基礎工事
いかがだったでしょうか。
今回はunderscoresを用いて、
WordPressサイトの基礎工事
をしていきました。
これを使うことで、テーマ開発で必要となるプログラムの記述作業を大幅に短縮することができます。
コードを読む知識は少し必要ですが、初心者でも問題なく使えるはずです。
既にプログラムは書かれていますが、デフォルトでは最低限のhtmlとCSSしか整備されていないので、次回はCSSでデザインを調整していきます。
今回は以上です。
最後までお読みいただきありがとうございました。
簡単操作！プログラミングならMacBook！
コメント