今回はWordpressのお問い合わせプラグイン「Contact Form 7」の見た目を変えてみたので、その方法について書いていきます。Bootstrapを使ってWordpressブログのレイアウトを組んだ方ならどなたでも使えるものですので、よかったら挑戦してみてください。

ささっとサイトを作りたい時に、自分で作ったスニペットかBootstrapなどのフレームワークが現時点での私の選択肢になります。先日Bootstrap4のJustified navテンプレートを使ってデモ画面を作成した時にCSSを少しいじくりました。簡単なことなのですが、備忘録として残しておきます。

Bootstrapの機能の一つモーダルウィンドウを紹介します。“モーダルウィンドウ”で検索をかけると実に様々な方法やスクリプトがあり、Webサイトに動きをつける機能の中で最も古い部類に入るものです。「レイアウトの都合上小さく埋め込んだ画像を詳しく見せたい、目に一緒に入ってくるテキストを一旦隠して画像だけ見せたい」時などに適しています。

前回はindex.phpのカスタマイズまで行いました。今回は投稿ページ、固定ページ、サイドバーの作成について説明します。ここまでで大体のWordpressの機能が揃います。投稿ページと固定ページはindex.phpから作成するので、意外とあっという間です。早く仕上げて細かなレイアウトに取り掛かりたいところです。

テーマ作りに使っているInitializer、2013年に完成して更新が止まっている為か、実はファイルのバージョンと書き方が若干古いです。ローカル環境でも「アップデート版を使いたいよ！」という人のためにバージョンを上げる方法を説明します。

テーマ開発に関連した説明を挟みましたが、再開します。前回Initializerで見た目のひな形を作り、ヘッダーとフッターをindex.phpから分割までを行いました。今回は投稿一覧となるindex.phpのカスタマイズについて説明します。 レスポンシブデザインに対応したBootstrapのグリッドシステムの仕組みと、Wordpressのループという概念について触れていきます。

Bootstrapを使ったWordpressのテーマについて説明していきます。HTMLとCSSのテンプレートを使って文書構造や見栄えについて手間をかけずにオリジナルテーマ最初の一歩を踏み出すのが今回の概要です。Wordpressの動き方や、どのようにWordPressの機能を設定していくのかを一緒に見ていきましょう。