はじめてのWordPress勉強会

vol.5 テーマ＆カスタマイズ

自己紹介

• 森田 昌宏 （もりた まさひろ）

• 業務系システム開発

• Android アプリ開発

① スマホ対応

• スマホ用サイト自動生成プラグイン

「WPtouch」プラグイン

• パソコン用とスマホ用のふたつのテーマを用意

「Multi Device Switcher」

• ひとつのテーマでパソコン＆スマホ

両対応

「レスポンシブ Web デザイン」

テーマの管理画面 「新規追加」

テーマの検索を行うことができる

② テーマ管理画面

左メニュー「外観」 テーマの管理画面

インストール済みのテーマが表示

• 使用中のテーマ

• 使用可能なテーマ

③ テーマを検索する

左メニュー「外観」 「ウィジェット」

カレンダーや最新の投稿などを表示

④ ウィジェットを管理する

左メニュー「外観」 「カスタマイズ」

サイトの表示を確認しながらカスタマイズ

⑤ 外観をカスタマイズ

左メニュー「外観」 「メニュー」

サイドバーやヘッダーに表示するナビゲーションメニューを作成

⑥ ナビゲーションメニューを作成する

左メニュー「外観」 「ヘッダー」

サイトのヘッダーデザインを変更する

⑦ ナビゲーションメニューを作成する

左メニュー「外観」 「テーマ編集」

テーマファイルを直接編集する

⑧ ソースコードをカスタマイズ

間違えて変更

⑧ ソースコードをカスタマイズ

重大なトラブルが発生

• サイト全体のデザインが崩れる

• 管理画面にログインできなくなる

⑨ テーマが利用できる機能

テーマごとに利用できる機能は異なる

• カスタムヘッダー

• カスタム背景

• サイドバーウィジェット

• ヘッダーのカスタムメニュー

• アイキャッチ画像

⑩ テーマのインストール

サイト設計を行ったレイアウト

に近いテーマを検索

インストール

⑪ テーマの特徴を確認する

• カスタムヘッダーに対応？

• カスタムメニューに対応？

• アイキャッチ画像の表示有無

• その他独自機能「新着情報」など

⑫ 必要な固定ページを作成する

各固定ページ

• ページ名

• スラッグ

⑫ 必要な固定ページを作成する

http://example.com/service/

http://example.com/contact/

スラッグ「contact」

スラッグ「service」

http://example.com/

トップページ

⑬ トップページと投稿一覧ページを設定

「設定」 「表示設定」

サイトのトップページ

「固定ページ：トップページ」

投稿の一覧

「固定ページ：ブログ」