【旧刊】WordPressテーマ制作のみを取り扱った別冊電子書籍がAmazon Unlimitedでお楽しみ頂けます!!
Amazon Unlimited内で 田中勇輔 で検索してください。

☓ 閉じる

30Nov2016

WordPressテーマ「Photo Diary Theme」導入マニュアル

当サイトで配布しているWordPressテーマ「Photo Diary Theme」の使用方法を解説します。

Photo Diaryは筆者がWeb制作の際に使用するデザインテンプレートのひとつで、そちらをベースにしてWordPressテーマ化したものが「Photo Diary Theme」となります。
デザインテーマPhoto Diaryについては下記ページをご確認ください。

デザインテーマPhoto Diaryを使ったWeb制作プランについて

デザインテーマPhoto Diaryを使った制作プランについて

上記ページ内でWordPressテーマを配布しています。
このページでは配布版テーマ「Photo Diary Theme」の使い方について解説します。

Photo Diary Themeを使う前に

  • WordPressテーマ「Photo Diary Theme」は(カスタマイズも含め)ご自由にご利用いただけます。
  • テーマ本体やカスタマイズをしたテーマの再配布もOKです。再配布される場合はフッターのクレジット表記を残してください。
  • テーマファイルに含まれる写真素材は著作権フリーですので安心して二次利用してください(当サイト上の写真は勝手に使わないでね)。
  • メールで使用方法のご質問を頂いた際は当ページ上でお答えします。個別にメールでお答えはしませんのでご了承ください。
  • 使用方法の質問、改善の要望などはどしどしご連絡ください。
  • 【重要】今後のバージョンアップで機能を追加した結果、無料配布が惜しくなって有料に切り替えても怒らないでください^^;

WordPressのインストールについてはこちらの連載記事を。
ダウンロードしたテーマのインストール方法はこちらの記事を。

サイトの骨組みを作る

固定ページの作成

ヘッダーのグローバルメニューに表示したいページを固定ページで作成します。ここでは例として、グローバルメニューに以下のページを表示させていきます。

  • HOME(サイトロゴ)
  • About
  • Gallery
  • Works
  • Blog
  • Contact

デザインテーマPhoto Diaryの特徴である「Gallery」ページですが、こちらは実は固定ページではなく投稿カテゴリーGalleryの一覧ページとなります。そのため固定ページGalleryは作成しません。その一方で、Galleryカテゴリー以外の投稿一覧ページである「Blog」は固定ページで作成する必要があります。ここでは本筋から外れるため詳しく説明しませんが、、、気になる人は勝手に調べてくださいまし。(当サイトの連載「WordPress講座」でそのうち触れます。たぶん。)

固定ページは本文は未入力で良いのでタイトルだけ入力して保存しておきます。
manual_photo_diary002

フロントページの設定

次に 設定 > 表示設定 を開き、フロントページの設定をおこないます。フロントページ(トップページ)には固定ページ「Home」を、投稿ページ(ブログページ)には固定ページ「Blog」を指定します。ここでは作成済みの固定ページしか選択できないので、最初に空の固定ページをつくったわけです。
manual_photo_diary004

投稿カテゴリーの作成

Photo Diary Themeのトップページには、NewsカテゴリーとGalleryカテゴリーに属する投稿が自動的に表示されます。これらのカテゴリーが存在しない場合、トップページが寂しい感じになってしまいます・・・。ここで重要なのが下の赤線の箇所。投稿スラッグです。自動取得される記事は厳密にはカテゴリー名ではなくカテゴリースラッグによって判別されますので、スラッグを「news」「gallery」としてください。
manual_photo_diary003

グローバルメニューの設定

外観 > メニュー を開き、グローバルメニューを設定します。
先ほどヘッダーに表示したいページのリストを書き出しました。サイトロゴがHOMEへのリンクとなりますので、作成した固定ページの中でHOMEはグローバルメニューには含まれません。そして作成した投稿カテゴリーGalleryへのリンクも追加しておきます。
manual_photo_diary005

上記キャプチャ内の下の方にある「メニュー設定 > テーマの位置」の欄で「ヘッダーナビゲーション」にチェックをつけます。

これでサイトの骨組みは完成しました。次に各ページを作っていきます。

トップページの作り方

固定ページテンプレートを適用

先ほど作成した固定ページHOMEを開き、テンプレート「TOPページ」を選択します。
manual_photo_diary001

テンプレート「TOPページ」の構造

これでトップページ専用のテンプレートが適用されました。トップページの構造は以下のようになっています。
manual_photo_diary006
A. 外観 > メニュー から作成したグローバルメニュー
B. 固定ページタイトル
C. 固定ページ本文
D. 投稿スラッグ「news」の最新投稿を表示
E. 投稿スラッグ「gallery」の最新投稿を表示

トップページの作成例

スライドショープラグインを活用して、以下のように作り込むことも可能です。
manual_photo_diary007

作例で使用したプラグインはMeta Sliderです。
WordPress公式プラグインディレクトリ「Meta Slider」

その他、注意点など

Contactページはメールフォームの設置を想定しています。私はプラグイン「Contact Form 7」がお気に入りです。
WordPress公式プラグインディレクトリ「Contact Form 7」

ブログページのサイドバーは 「外観 > ウィジェット」 から設定できます。
テキストウィジェットを使うことで、サイドバーにも自由にテキストやプロフィール写真などを設置可能です。

関連記事