WordPressで今時のさまざまなデザインや機能、UIを実装するすごいテクニックを詳しく解説 -WordPressデザインのメソッド

WordPressは最早できないものはないくらい、さまざまなタイプのWebサイトが制作できます。しかしその出来ることが多すぎて、どこから手をつければよいのか分からない、具体的にどうすればよいのか探すのが大変ということもあります。

WordPressを使用したサイトを作成する際に、必要とされる制作テクニックをしっかり身につけることができるオススメの本を紹介します。
WordPress最新版に対応です!

本の表紙

本書は2013年に刊行された「WordPressデザインのメソッド」のアップデート版で、2016年現在の状況に合わせて各テクニックの実装方法が全面見直され、レスポンシブサイトに不向きなテクニックは削られたものです。
今時のさまざまなデザインや機能、UIを実装するすごいテクニックが解説されています。

本の表紙

現場でかならず使われている
WordPressデザインのメソッド[アップデート版]
[Amazonでみる]
[楽天でみる]

監修:
WP-D
出版社:
MdNコーポレーション
発売日:
2016/9/2

Kindle版は値段が少し安く、お得です。

では、そんな本書の中身を紙面のキャプチャで少しだけご紹介。

誌面のキャプチャ

WordPressといえば、有料・無料を問わずさまざまなテーマファイルがあり、そしてCSSのフレームワークもたくさんあります。しかしそれらは初期状態のままでは中身がありません。本書ではテーマのベースに「Underscores」、CSSのフレームワークに「Foundation」を使用して、Webサイトを効率的な手順で制作します。

本書で使用するテーマはサポートページからダウンロードでき、GPLライセンスで利用できます。

誌面のキャプチャ

本書は3章構成で、1, 2章では環境構築と基本構築。
テーマの基本設定をおこない、Webサイトでよく利用される基本的なコンポーネントを実装します。

誌面のキャプチャ

3章ではそのサイトに必要とされるカスタマイズ、さまざまな機能・コンポーネントを実装します。

誌面のキャプチャ

1章のWordPressの基本機能をつかった実装は非常に分かりやすく、他のテーマファイルを使用する時にも活用できます。

誌面のキャプチャ

実装方法は4-6ページくらいでしっかり解説されています。

誌面のキャプチャ

3章のカスタマイズ編も非常に充実しています。
やりたいことがWordPressだとこんなに簡単にできるのか!と思ってしまいます。

誌面のキャプチャ

どのファイルをいじるのか、ページがどのようになるのか、どのようにするのかなど、制作の手順がよく分かります。

誌面のキャプチャ

コードの解説だけでなく、注意すべきポイントがしっかり書かれてあるのは嬉しいですね。

誌面のキャプチャ

プラグインも設定から、カスタマイズ方法まで分かりやすく解説されています。

誌面のキャプチャ

一覧ページだけを無限スクロール対応にする、というのも簡単です。

誌面のキャプチャ

スライドショーもプロダクトやお店のサイトでは人気が高いですよね。スマホ対応のスライドショーも自分のサイトにあった形で実装できます。

誌面のキャプチャ

プラグインを使わずにカスタマイズする方法も数多く紹介されています。

誌面のキャプチャ

付録にあるテンプレートタグのリファレンスは一覧でまとまっており、本家より分かりやすいです。これだけでも本書の価値がありますね。

WordPressデザインのメソッドの目次

  1. 環境構築とテーマの準備
    本書のサンプルテーマを組み込む
    サンプルテーマのテンプレート構造
    サンプルテーマの各ページ紹介
    サンプルテーマで利用されているWordPressの投稿タイプと機能
    カスタマイズのベースとなる_s(Underscores)テーマ
    レスポンシブレイアウトを手軽に実装できる「Foundation」
    コラム: WordPressのバックアップ
  2. WordPressサイトの基本構築
    ループでデータベースのコンテンツを表示する
    メインナビゲーションを設定する
    メイン画像(カスタムヘッダー) を設定する
    パンくずリストとページナビを表示する
    サイドバーにウィジェットを設定する
    サブナビゲーションを設定する
    年ごとに表示が変わるcopyrightを設定する
    サイトマップを表示させる
    検索機能を導入する
    404ページを設置する
    記事にアイキャッチを設定する
    コメント欄の設置とコメント機能の停止
    お問い合わせフォームを作成する
    アクセスページにグーグルマップを使う
    カスタムフィールドを応用した商品メニューの作成
    カスタム投稿タイプによるスタッフ紹介ページの登録
    コラム: セキュリティ対策を考えよう
  3. 多彩なカスタマイズ
    基本SEO&SMO対策
    トップページに表示する情報を別の固定ページで管理する
    特定のカテゴリーの最新記事をトップページに表示する
    OGPを設定しSNSで表示される情報を最適化
    SNSのソーシャルボタンを記事本文に表示する
    ソーシャルウィジェットをウィジェットエリアに表示
    記事の投稿と同時に、自動的にSNSにも投稿する
    WordPressのコメント欄をFacebookと連携する
    定型作業用にショートコードをつくる
    Infinite Scrollを組み込む
    メインビジュアルをスライドショーに
    タブインターフェイスを導入する
    Lightbox系プラグインで画像を見栄えよく表示
    おしゃれな写真ギャラリーを設置
    上部固定ナビゲーション
    Pinterest風に画像を一覧表示
    ページトップへ戻るボタンの導入する
    Webフォントを利用する
    アイキャッチ画像をカッコよくするCSS
    レスポンシブ対応した動画の埋め込み
    スマートフォン閲覧時のメニュー表示のバリエーション
    レスポンシブ対応の表組みを作成する

本書の執筆陣はWordPressのコミュニティサイト「WP-D」で執筆されている現役のディレクター・デザイナー・プログラマーたちです。その執筆陣が現場で使用されている数々のテクニックを詳しく、そして分かりやすく解説されています。

企業サイトやキャンペーンサイト、個人ブログやポートフォリオなど、WordPressで作成する時のよい解説書、アイデア集、そして逆引きのテクニック集として役立ちます。

本の表紙

現場でかならず使われている
WordPressデザインのメソッド[アップデート版]
[Amazonでみる]
[楽天でみる]

監修:
WP-D
出版社:
MdNコーポレーション
発売日:
2016/9/2

献本の御礼

最後に、献本いただいたMdNコーポレーションの担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

top of page

©2018 coliss