ECサイトオーナーTY(てぃーわい)です。2005年にECサイトを立ち上げ、制作から運営システムまで全てを自分で作ってきた経験を元に、2012年からはサイト制作、ECコンサルティング、書籍執筆、テキスト制作などをしています。f’logはデザインリニューアルしました。今回は、投稿日時の表示を”おしゃれ”に表示する方法。左側の日付が表示されている部分です。正方形の領域に日付を表示させるデザインは汎用性が高いですので、CSSごと公開します。使ってください!※極力シンプルに紹介するため、要点以外の説明は可能な限り省きます。投稿記事は動的に生成されますので、テーマファイル内に「日付をゲット」という意味のPHPを記述する必要があります。各記事ページをカスタムする場合は、テーマフォルダ内「single.php」というファイルを編集します。※WordPressのテンプレートテーマ構造についてはこちらの記事がオススメ。日付を取得するには以下の関数を使用します。‘)内を変更することによって、好みの出力を得る事ができます。使用できるパラメーター(引数:ひきすう)は以下。GMTでのUNIXタイムスタンプ※参考:WordPress関数リファレンスガイド↓このように使います今回のデザインでは「(頭に0のついた)日付」「(英語のフルスペルで)月」を使用します。日付を01~31で表示する場合の引数は「d」ですね。月の英語表記は・・・と。日本語環境で月を英語表記にする調べたら必ず答えが見つかるのがWordPressの最大の強み。調べてみると、参考になる記事が続々登場します。WordPressのthe_date()やthe_time()で日付を英語で表示出来なくなったのでget_post_time()を使ったWordPressの投稿日付を英語で表示する|the_date()⇒get_post_time()続々登場した中から最もシンプルな方法を紹介しているのが上記記事。the_time関数の代わりにget_post_time関数を使う。?>the_time関数と比較すると、以下のようになります。実際にphpで製作してみよう!では実際にテンプレートファイルをカスタマイズしてみます。各投稿記事ページを編集する場合、single.phpです。※しつこいですが、テンプレートテーマ構造を理解していない場合はこちらを先に。最初に覚えるテンプレートテーマの構造コードの中にthe_time関数、get_the_time関数、the_date関数など、投稿日時をゲットしている箇所があるはずですので、そこらへんを変更してみましょう。HTML/CSSを理解していればPHPはなんとなく解かりますので、レッツチャレンジ!!※変更するまえにsingle.phpをコピーしてbackup_single.phpなど、バックアップファイルを作っておきましょう。黒い四角の部分を、まずはHTML/CSSで製作してみます。class="title-date-month">July</span></div>CSSでボックスを黒塗りにしたり、”日”のフォントを大きくしたり、いろいろ調節します。※実際のコードからfloatやmarginなど環境により大きく変わる指定を省きました。{display:block;height:20px;overflow:hidden;font-size:14px;line-height:14px;}デザインが整ったら、最初のHTMLをPHPで書き換えましょう。?></span></div>HTMLを見てみると、”日”と”月”にspanを使い、わざわざdisplay:blockでブロック要素に変換しています。これは「pは単語ではなく文章」というHTMLのルールに則っているからです。