さっき決めたブログ

[WordPressサイト構築日記03]テンプレートの作製をはじめよう

目次

• テンプレートの登録
• フレームの作成

(大体だけど)環境も整ったので、ワードプレスのテンプレートの作成をしていきます。

どんなの作ろう？と、今考えているのは。

• 他のテンプレートの改造ではなくて１から作ろう(勉強も兼ねているし)。
• 現在はローカルな環境で開発してるけど、実際の運用については、まずは無料のレンタルサーバで運用したい。 そうなると容量少ないから、画像とか容量の大きいものはクラウドドライブを使用したい。
• プラグインは必要最低限にして、テンプレート内部で実装しよう(勉強も兼ねているし)。
• いろんな(？)機能に対応できたらいいな～🤔

くらいで、なんかぼんやりした感じですが、見切りでボチボチ進めていきます。

テンプレートの登録

WordPressにテンプレートを認識させる作業を行います。

• テンプレートのフォルダ直下にオリジナルテンプレート用のフォルダを作成する。
  (自分の場合は \\www\wordpress\wp-content\themes\test_templ としました)
• 作成したフォルダにstyle.cssファイルをこんな感じで作成
  (他にも色々と設定出来る項目はあるけど、最低これだけあれば良いみたい)
• (なくてもいいけど)縦横比3:4の適当な画像をscreenshot.jpgの名前で登録
• WordPressの設定画面にこんな感じで認識されるので、有効化を押して完了。
  (ダッシュボードから 外観 → テーマ を選択)
  

この時点で、サイトを見てみるとまだ何も表示されていないので、これから内容を作り込んでいくことになります。

フレームの作成

今回作ろうと思っているのは、３ペインで幅可変のタイプのサイトになります。
可変3ペインのサイト作成についてはこちらなど参考にするといいと思います。

始めに index.php ファイルを作成して、中にこんな感じでhtmlを書込みます。

style.css もこんな感じに編集。

確認のために各エリアごとに適当な色を付けて、適当な文字を入れています。
あと、レイアウトとは関係ないのですが、今回フォントにGoogleのWebフォント
絵文字や記号にFont Awesomeを使用出来るように、CSSの先頭部分でimportしています。

これでサイトを見てみるとこんな感じになります。

全然プログラム書いていないからただのhtmlだけど、とりあえず表示されました。

次回はこれにコードを追加して、記事一覧を表示したいと思います。

ここまでのコード
test_templ001.zip

以上となります。