Simple Journal – HTMLファイルを元にテンプレートファイルをつくる

前回までで HTML + CSS の作成がひと段落したので、早速WordPressテーマの実装に移りたいと思います。

 

01. HTMLファイルの拡張子を.phpに変更

まず、前回までに作成した HTML + CSS(index.html、single.html、style.css)を、先日の記事の中で作成したテーマ用のフォルダ(作業ディレクトリ以下の wp-content/themes/simplejournal)に移動します。

※ なお、前回作成した index.php ファイルは削除しておきます。

Copy HTMO+CSS

次に、HTMLファイルの拡張子を以下のように変更します。

  • index.html -> index.php
  • single.html -> single.php

After Rename to PHP

 

02. WordPress環境を起動して動作確認

VCCWで構築したWordPress環境を起動します(作業用ディレクトリで vagrant up コマンドを実行)。

管理画面にログインし、左サイドバーの「外観 > テーマ」からテーマの一覧を表示して「Simple Journal」を有効化します。

Enable Theme

その後、サイトのトップページを表示すると以下のようになります(スタイルシートが適用されていない状態です)。

TopPage without CSS

 

03. テーマにCSSを適用する

テーマにスタイルシートを適用します。

index.php の7行目のスタイルシートへのリンク

を、次のように書き換えます。

 

再びサイトのトップページを表示すると、以下のようになります(ちゃんとスタイルシートが適用された状態となります)。

TopPage With CSS

 

先ほど追加した記述(「<?php」と「 ?>」に囲まれたコード)をテンプレートタグといい、テンプレートファイルに様々なテンプレートタグを記述していくことで、ブログのデータを動的に表示できるようになります。

 

今後はこのテンプレートタグを活用したり、テンプレートファイルを追加したりしていきながら、さらにテーマの作り込みを進めていきます。

 

Simple Journal – PC向けの HTML+CSS を作成

今回はPC向けのスタイルを作成してみました(画像をクリックでHTMLを表示します)。

Webブラウザの横幅を大きくすると、文字の大きさや余白の広さ、コメントのレイアウトなどが変わります。

 

トップページ

IndexPage for PC

投稿ページ

SinglePage for PC

 

もっと作り込んでもいいのですが、それはおいおいということで・・・(^ ^;

次回からWordPressテーマ用のテンプレートファイルの実装に入りたいと思います。

Simple Journal – スマートフォン向けの HTML+CSS を作成

今回はテーマのベースとなる HTML + CSS を作成してみました(画像をクリックでHTMLを表示します)。

今のところCSSはスマートフォン向けのみに対応。

 

トップページ

IndexPage

投稿ページ

HTML要素のスタイリングもひととおり完了しています(日本語ばかりになったときのスタイリングにはあまり自信がないかもしれません・・・)。

SinglePage

次回はPC向けのCSSも追記し、レスポンシブWEBデザインに対応しようと思います。