真っ白から始めるWordPressテーマ作成WordPressテーマを新規に作る機会があったのですが、何から作るんだっけと戸惑ってしまいました。そこで改めて必要なものや手順をおさらいしたので備忘録的にご紹介したいなと思います。最初にすることトップページをつくるCSSとJavaScriptサブページをつくる画像などのパスは絶対パスにしよう総仕上げ!管理画面からテーマを設定しようさいごに必要なファイルはこれだけ絶対必要なのは2つ・index.php...トップページ用phpファイル・style.css...見た目を整えるcssファイルWordPressというのはいくつかのphpファイルの集まりで出来ています。そのファイルたちをWordPressテーマとして認識してもらうのに必要なのがindex.phpとstyle.cssです。これさえあればテーマとして認識されます、が大抵の場合これでは足りないので下に紹介するファイルも作りましょう。だいたいいつも使うファイル・header.php・footer.php・single.php・functions.php・page.php・archives.php・404.php場合によって作成するファイルその時々によっては下のファイルも作りましょう。今回はシンプルなコーポレートサイトを想定します。下記のような構成図で作成していきます。┣アクセス┣会社ブログ┗お問い合わせ会社ブログを会社様ご自身に更新していただくためにWordPressを実装しますよ、という感じの案件ですね。ページと大まかな分類があります。・投稿ページ...ブログやニュース、プレスリリースなどで使います。・投稿一覧ページ...上記の投稿を並べた一覧ページに使います。・固定ページ...会社概要など更新頻度の低いページに使います。投稿ページは投稿1つ1つによってデザインを変えることはできません。(カテゴリーやタグごとにはできます)固定ページはページごとにデザインを変えられますが、投稿ページのようなコメント機能はありません。最初にすることWordPressのインストールWordPressの公式サイトからダウンロードしましょう。一緒にデータベースも用意しましょう。・データベースパスワード・データベースホストこれらを入力しましょう。デバッグモードを使おうwp-config.phpを編集するときについでにやっておきたいのがデバッグモードの設定です。これをしておくと何かコードを間違えたときにどこが間違っているのか表示してくれます。設定は簡単でこのfalseの部分をtrueにするだけです。トップページをつくるheaderとfooter、たまにsidebarトップページであるindex.phpは複数のphpファイルで構成されています。先にHTMLでマークアップしておくとスムーズです。マークアップしたHTMLのheader部分をコピーし、header.phpとして保存しましょう。?>を記述しましょう。次にHTMLからfooter部分をコピーし、footer.phpとして保存しましょう。?>を記述するのを忘れないようにしましょう。この2つの記述がないとプラグインが動かない場合があります。index.phpにはHTMLのコンテンツ部分をコピーします。これはheader.phpとfooter.phpを呼び出すコードです。※以下サンプルコード※header.php※footer.php※index.phpCSSとJavaScriptstyle.cssWordPressのテーマ作成で必ず必要なstyle.cssには、これまた必ず書く記述があります。Name」だけなので、あとはお好みでどうぞ。テーマ名は管理画面からも見えるので「○○(社名とか)専用テーマ」なんて付けてあるとわかりやすいですね。別のcssファイルにして、header.phpなどから呼び込むこともできます。WordPressでjQueryを使うとき動きを付けたいときにjavascrptやjQueryを使う場合、注意する点があります。WordPressには標準でjQueryが読み込まれているということです。これは「/wp/wp-includes/js/jquery/jquery.js」から呼ばれています(大抵の場合)。このjQueryは普通とは違ってコンフリクトを起こさない工夫がされているためjQueryでよく記述する「$」が使えません。});」でラップするだけです。この中では「$」が使えるので普段通りの書き方ができます。※以下サンプルコードサブページをつくる続いてはサブページを作っていきましょう。こちらも先にHTMLでマークアップしてあると早いですよ。固定ページをつくる今回は会社概要のページを作成するとします。固定ページにはページごとにテンプレートが設定できるのでpage.phpから派生したpage-company.phpを作成しましょう。サブページ全体のテンプレートをpage.phpとして各ページのコンテンツを管理画面から入力する方法もありますが今回はweb制作者の方が管理しやすいように各ページをphpファイルにわける方法にします。Name」は必ず書いてください。この時の名前が管理画面に表示されます。この場合は「会社概要のページ」と表示されます。投稿ページをつくるお知らせやブログの部分は投稿ページとして作成します。こちらは管理画面から入力したものを表示したいので、記事を表示するループ文を記述します。※以下サンプルコード※single.php一覧ページをつくる投稿ページを作ったら次は、投稿一覧を表示するページを作りましょう。archive.phpやcategory.phpがこれにあてはまります。ブログサイトではトップページに記事一覧を表示している場合もありますね。今回は会社ブログの部分のほかに投稿する箇所がないので、archive.phpとして作成します。※以下サンプルコード※archive.php画像などのパスは絶対パスにしよう画像のパスWordPressではphpファイルを使って別のphpファイルを読み込んだりする場面が多くあります。その時に画像などのファイルパスは相対パスではなく、絶対パスで書くといいでしょう。get_template_directory_uriを使って、ドメイン名からテーマフォルダーまでのパスを呼び出すとスムーズです。画像と同じくリンクタグにも絶対パスで記述しましょう。?>のようにドメイン名までを表示するhome_urlに各ページのスラッグを付け足す感じで書くとスマートです。総仕上げ!管理画面からテーマを設定しよう作ったファイルをサーバーにアップロード残りのページも同じように作成したら、いよいよ大詰め、ファイルをサーバーにアップロードします。先ほどまでに作成したファイルはすべてテーマフォルダーの中にあるので、wp/wp-content/themes/この階層にフォルダーごとアップロードしましょう。テーマを選択テーマフォルダーをアップロードすると、管理画面の「外観>テーマ」のところに表示されます。作成したテーマを有効化しましょう。するとトップページが作成したindex.phpの形になっていると思います。固定ページを登録テーマを有効化したら、固定ページを登録していきましょう。管理画面の固定ページ>新規追加から作成します。タイトルを入力して、右側のページ属性からテンプレートを選びます。プレビューで表示を確認し問題なければ公開しましょう。記事を投稿してみよう投稿ページであるsingle.phpやarchive.phpが正常に表示されるか記事を投稿して確かめてみましょう。管理画面の「投稿>新規追加」から記事の作成ができます。タイトルと本文を入力したらプレビューで確認し、公開します。カテゴリーやタグを使用する場合は右に表示されるので、そこから選択してくださいね。さいごにWordPressには素敵なテーマテンプレートがたくさんありますが、やっぱりサイトの仕様に合わせてカスタマイズするには、新規にテーマを作るのも有用です。上で説明したほかにもWordPressではたくさんのことができるので、うまく活用して、より効率よく運用できるサイト構築を心掛けたいですね。