foundationを使ったWordPressのテーマ作成手順

foundationを使ったWordPressのテーマ作成手順を一覧にしました。

テーマを作る度に、手順を記録しておこうと思うのですが、ついつい面倒で先延ばしにしてきました。

今回は、記憶にある手順はすべて書いておこうという試みです。同時に、参考にしたサイト等も整理しました。

新しいグリッドシステムである、XY Gridを使って、従来の方法を検証する必要もありましたので良い機会でした。

この記事では、以下の内容を書いています。

Foundation v6.4.2を使用して、WordPress v4.8.1のテーマを作成します。

1. WordPressのインストール(インストール方法の詳細は省略しています)
2. テーマの作成
3. XY Gridを使ったページの編集
4. ファイルの分割、アップロード
5. ヘッダー、コンテンツ、フッターの仕上げ
6. アイキャッチの設定

 
長文になっていますが、ゆっくりご覧ください。
役に立ちましたら、SNSでのリアクションをぜひお願いします。

WordPressのインストール

1. WordPressをダウンロードする

日本語ーWordPress

2. ダウンロードしたファイルを解凍して、インストール先サーバーに転送し、インストールをする。

3. インストール後、サンプルの投稿、固定ページ、コメントを削除する。

4. 固定ページを2ページ作成する。

1) タイトル: ホーム パーマリンク: /top/
2) タイトル: 記事一覧 パーマリンク: /archive/

5. [設定]-[表示設定]-[フロントページの表示]で、[固定ページ]を選び、フロントページに[ホーム]、投稿ページに[記事一覧]を選択しておく。

テーマの作成

1. ローカルでテーマ用のフォルダを作成し、index.phpstyle.cssを保存する。中身は空のファイルで構わない。

2. 1.で作成したフォルダを、/wp-content/themes/以下にアップロードする。

3. style.cssにテーマの情報を入力し、アップロードする。

4. [ダッシュボード]-[外観]-[テーマ]で、作成したテーマを[有効化]にする。

XY Gridを使ったページの編集

1. foundationをダウンロードする。以下のサイトから「Complete」の「Download Everything」をダウンロード。

Foundation for Sites

2. index.html、cssフォルダ、jsフォルダがダウンロードされる。

3. index.htmlをエディターで開き、<body>と最後から5行目の<script src="js/vendor/jquery.js"></script>の間のHTMLをすべて削除する。

4. lang属性をjaに変更する。

5. WordPressのテンプレートタグを入力する。

</head>の前に、<?php wp_head(); ?>
</body>の前に、<?php wp_footer(); ?>

6. XY Gridを使って、グリッドを作成する。

ヘッダーが2分割、コンテンツが2分割、フッターが3分割+1のグリッドです。

foundation 6を使ったWordPressテーマ作成 グリッドイメージです

作成したグリッドです。赤枠が.grid-container、青枠が.grid-xです。左右のpaddingは自動的に空きました。

foundation 6を使ったWordPressテーマ作成 グリッドのレスポンシブイメージです

smallサイズでタテに整列するレスポンシブです。

ファイルの分割

1. ファイルを分割する。

1) 先頭から、ヘッダー終了のコメントまでを切り出し、header.phpとして、テーマのフォルダ内に保存する。
2) サイドバー開始のコメントから、サイドバーの終了のコメントまでを切り出し、sidebar.phpとして、テーマのフォルダ内に保存する。
3) フッター開始のコメントから最後までを切り出し、footer.phpとして、テーマのフォルダ内に保存する。
4) 残ったindex.htmlをfront-page.phpとして、テーマのフォルダ内に保存する。

2. 分割したファイルを読み込むテンプレートタグを入力する。

front-page.phpにテンプレートタグを入力します。

3. ファイルをサーバーへアップロードする。

以下のファイルとフォルダを、/wp-content/themes/下のテーマ用フォルダにアップロードします。

  • header.php
  • sidebar.php
  • footer.php
  • front-page.php
  • cssフォルダ
  • jsフォルダ

ファイルの仕上げ

アップロードしたファイルを仕上げていきます。

1. header.phpのcssへのパスを、/wp-content/themes/テーマ用フォルダ名/を追加して変更します。

2. 同様に、footer.phpのjsへのパスを、/wp-content/themes/テーマ用フォルダ名/を追加して変更します。

3. 変更したファイルをアップロードして、組んだグリッドが元通りに表示されていればOKです。

ヘッダーの仕上げ

1. header.phpに、description、keyword、titleを自動で生成するプログラム、およびOGP設定の別ファイルを読み込ませます。

それぞれのファイルの詳細は以下です。

head_des_key_tit.php

wordpressで記事抜粋のdescriptionと記事タグをkeywordsに自動挿入するを参考にさせていただきました。

PHPのバージョンV.5.xで動きます。V.7.x以上をお使いの方は、$descrip = mb_substr(ereg_replace("(r|n|rn)"ereg_replacepreg_replaceに書き換えると動きます。

ogp.php

【WordPress】Facebook OGPプラグインの使用を止めて自前で設定したら意図通りの画像で正しくシェアされるようになったを参考にさせていただきました。

fb:app_idtwitter:siteが伏せてありますが、ご自身のものを入力してください。

2. ウィジェットを設定する。

ヘッダーの右側は、問い合わせ先、連絡先を入れることを想定しています。ファイルに直接書き込んでもいいのですが、汎用性を考えてウィジェットを設定します。ついでに、サイドバーのウィジェットも作ります。

functions.phpを作成します。エディターで以下を入力したら、functions.phpとして、テーマ用のフォルダに保存します。

header.phpsidebar.phpの該当箇所にウィジェットを挿入します。

header.php

sidebar.php

3. functions.phpheader.phpsidebar.phpをアップロードします。

4. [ダッシュボード]-[外観]-[ウィジェット]で、ウィジェットが有効になったことを確認します。

ウィジェットの設定イメージです

ヘッダーとサイドバーのウィジェットが設定されました。

5. サイトのタイトルと説明を設定する

続いて左側も設定します。WordPressの設定から、タイトル、サイトの説明を表示します。タイトルにはリンクが設定されます。

6. header.phpを更新しサイトを表示して、タイトルと説明が表示されたことを確認します。

コンテンツの仕上げ

1. front-page.phpを仕上げる。

front-page.phpはトップページを表示するテンプレートです。今回は、最新の投稿を1件、表示するように設定します。

2. single.phpを仕上げる。

single.phpは、個別の投稿を表示するテンプレートです。front-page.phpをコピーして作成します。
さらに、前後の投稿へ移動できるように、WordPressのテンプレートタグprevious_post_linknext_post_linkを使ってリンクを作成します。

テンプレートタグ/previous posts link
テンプレートタグ/next posts link

3. index.phpを仕上げる

index.phpで、投稿の一覧を表示します。テーマの作成で最初に作成したindex.phpを使用します。さらに、アーカイブ表示用にarchive.phpを作成します。今回は、とりあえず同じ中身で作成しておきます。

一覧ページ、アーカイブページには、ページネーションを作成します。WordPressの投稿ページネーション関数(the posts pagination)を使用します。

css/style.css

関数リファレンス/the posts pagination

4. front-page.phpsingle.phpindex.phparchive.phpをアップロードします。

5. 動作を確認する。

1) WordPressをインストールしたURLにアクセス → 最新の記事が表示される
2) WordPressをインストールしたURL/archive/にアクセス → 投稿一覧が表示される
3) 投稿一覧から一つの記事をクリック → 単体の記事が表示される

フッターの仕上げ

「ページトップへ戻る」リンクを作成する。

footer.php

css/style.css

アイキャッチの設定

アイキャッチ画像を使用するには、以下の2点の作業が必要です。

1. functions.phpadd_theme_support('post-thumbnails');を追加する

2. アイキャッチを表示したい場所に、<?php the_post_thumbnail(); ?>を入力する

とりあえず、front-page.phpsingle.phpに、<?php the_post_thumbnail(); ?>を書いておきます。

レスポンシブなグローバルナビゲーションの設定

最後に、グローバルナビゲーション、いわゆるメニューを作ります。
WordPressの機能としてメニューを作成することもできますが、今回は、foundationの機能でレスポンシブなメニューを作ります。

1. header.phpを開き、headerを閉じたあとにnavを作ります。navはheaderに含まれるだろというご指摘もあると思いますが、それでも構いません。

2. 以上でメニューが完成です。画面の幅をせばめるとメニューが変化します。色はCSSで整えてください。

と、駆け足でテーマ作成手順を見てきました。これで大枠はできていますので、中に文字を入れたり、CSSでデザインを整えたりして制作していきます。

コメント