PHPをさわらず作る！デザイナーさんのためのWordPress【超！初級】

PHPをさわらず作る！

デザイナーさんのためのWordPress

【超！初級】

@mamy315 　 Mami Kuroki

Profile

@mamy315/ Mami Kuroki 3年間、企画広報・事務として三菱系列会社に勤務 3年間、DTP／グラフィックデザイナー 6年間、Webデザイナーとして勤務 2011 WordBench神戸に参加　　　WordCamp KOBE でスピーカー+広報担当 WordPressは個人では2009年から、仕事では2010年から活用しています。 mamydesign.net

Profile

WordPressで作ったことのあるサイト：

イベントサイト、中小企業サイト、学会サイト、会員制サイト、

個人ブログ+SNS(BuddyPress使用）など

参考資料

WordCamp KOBE 2011では「文系女子デザイナーによる中小企業サイト構築【初級】」のテーマでお話しました。オリジナルテーマの作り方など初中級レベルの参考になる情報を載せています。 ★スライドは下記にアップしています http://www.slideshare.net/mamy315

お品書き

1. インストール前にすべきこと

2. 管理画面で最初に設定したほうがいい項目

3. 固定ページと投稿ページの違いと使い方

　上記をふまえたサイトの設計

4. 配布テーマの使い方

　子テーマ作成でWordPressに慣れる！

5. HTML5で作られた配布テーマの色々

6. 使えるプラグイン

7. トラブったときの対処方法

お品書き










インストール前にすべきこと

その１

希望のURLがある、もしくは独自ドメインをすでに取得している場合は、ドメインを先に浸透

させておきましょう。

お品書き










管理画面で最初に設定したほうが

いい項目

その2

・設定＞一般・設定＞プライバシー・設定＞パーマリンク★ ・既存プラグインを有効化

管理画面で最初に設定したほうがいい項目

・設定＞一般

その2


・設定＞プライバシー（公開前の場合）

その2


・設定＞パーマリンク

その2

デフォルトは他のオプションがつくと見苦しくなるので好ましくありません。ここでは最も短いURLとなる「投稿名」を選択しておきます。パーマリンクの詳細やトラブルに関しては、WordPress日本語Codexを参照しておきましょう。


・既存プラグインを有効化：デフォで入ってるもの

その2

・Akismet：コメント、トラックバックスパムを監視・Contact Form7：お問い合わせフォーム・Hello Dolly：（邪魔だから削除）・WP-SpamFree：コメントスパム専用・WP-Multibyte Patch：日本語マルチバイト文字の不具合修正・WP Super Cache：表示を早くする（サーバ側でPHPセーフモードになっている場合使えないので契約しているサーバのPHP verもしくは設定を確認する）・WPtouch：スマートフォン向けにカスタマイズしてくれる


・既存プラグインを有効化：デフォで入ってるもの

その2

・Akismet：コメント、トラックバックスパムを監視・Contact Form7：お問い合わせフォーム・Hello Dolly：（邪魔だから削除）・WP-SpamFree：コメントスパム専用・WP-Multibyte Patch：日本語マルチバイト文字の不具合修正・WP Super Cache：表示を早くする（サーバ側でPHPセーフモードになっている場合使えないので契約しているサーバのPHP verもしくは設定を確認する）・WPtouch：スマートフォン向けにカスタマイズしてくれる


・既存プラグインを有効化

その2

・WP-SpamFree・・コメントスパム専用＞＞有効化したあと、「設定」から、”General Options”の一番下にある「Help promote WP-SpamFree」のチェックを外し、Update optionsをクリックして保存。上記の設定をすることでコメント欄に出てくる不要な情報を削除できます。

お品書き










固定ページと投稿ページの違いと使い方

その３

★固定ページ会社概要、プロフィール、お問い合わせフォームなど更

新が不必要なページに使用

★投稿ページお知らせやブログなど、常に更新していくページに使用


その３

以上の特徴から、コーポレートサイトの設計をする時は、

先に各ページが、どちらのページタイプに適しているか

を振り分けて設計を考えておくことが必要です。


その３

サイト設計例：

TOP 新着（投稿）

会社情報（固定）

お問い合わせ（固定）

商品紹介（固定）

社員ブログ（投稿）


その３

固定ページには常

時表示しておきた

い情報を（メ

ニューナビ）、投

稿には蓄積型の情

報を掲載していき

ます。


その３

固定ページは親ページを指定するこ

とができ、下層ページをどんどん作

成していくことができます。固定

ページ編集画面の右サイドにある

「ページ属性」で親ページを指定す

ることで下層ページを作成できます。


その３

デフォルトテーマの

Twenty Elevenでは、このようにページナビ

に下層メニューが表示

されます。


その３

投稿ページが複数ページにまたがる場合は、それぞれをカテゴリ分けして、カテゴリごとのページをリンクさせます。ダッシュボードから「投稿＞カテゴリー」を選んで「新着情報（news)」と「社員ブログ(blog)」を作成します。


その３

テーマがTwenty Elevenの場合、ダッシュボードの「外観」＞「メ

ニュー」からカスタムメニューを作

成します。（メインメニューと名付

けて生成）「固定ページ」と「カテ

ゴリー」からメニューナビに表示さ

せたいリンクを追加していきます。


その３

プレビュー結果。

固定ページと投

稿でカテゴリ分

けしたページが

ナビゲーション

にリンクされて

います。


その３

固定ページもし

くは投稿ページ

は任意のページ

をフロントペー

ジに指定するこ

ともできます。


その３

トップに常に固定の情報を

掲載する場合に適していま

す。

お品書き










配布テーマの使い方

その４

http://wordpress.org/extend/themes/ テーマは現在（2/16）1478本あり、様々なレイアウトのテーマを自由に選択することができます。が中には最新のWordPressバージョンに対応していないものもあるので気をつけましょう。

配布テーマの使い方

その４

初心者さんは、既存のテーマを親テーマとして、子テー

マでレイアウトデザインをカスタマイズしてみるのが、

WordPressを理解する上で、一番手っ取り早い方法です。

親子読み込む

データそのまま変更したいCSSやPHPだけ書き込んでアップ

配布テーマの使い方：子テーマの設定方法

その４

親フォルダとは別に任意のフォルダを作成し子テーマ用

のCSSを作成する。

子

変更したいパーツ

のPHPファイル変更したい箇所を上書きしたCSS

配布テーマの使い方：子テーマの作成方法

その４

子テーマ用CSSの書き方 /* Theme Name: wbkobeサンプル Theme URI: http: //mamydesign.net/wbkobe1/ Description: Child theme for the Twenty Eleven theme for WordPress Author: Mami Kuroki Author URI: http://mamydesign.net Template: twentyeleven Version: 1.3 */ @import url('../twentyeleven/style.css');


その４

メニューの背景とフッターの背景色、コピーライトを変えてみる

メニューは黒から茶色へフッターは白から茶色。文字色は白。©は独自のものへ


その４

子テーマ用CSSに変更をかけたい部

分だけ書き足す


その４

footer.phpだけ親フォルダからコピーして子フォルダにペースト。子フォルダのfooter.phpの©部分を編集

一括で削除して自分の©に変更。


その４

子テーマフォルダには変更を加えたファイルだけが入っています。フォルダごとthemeフォルダにアップロードして、管理画面の外観＞テーマから、子フォルダを選択して有効化します。


その４

メニューとフッターが変わってい

ることが確認できました。


その４

このように、既存テーマの子テーマを作成・カスタマイ

ズすることで、WordPressの構造やHTML5の書き方、カスタマイズの仕方を理解していくことができます。初心者さんには、一気にオリジナルテーマで作成するよ

りも、徐々になれていくことをおすすめします。

配布テーマの使い方：TwentyEleven

その４

さらなるカスタマイズをし

たい方は大先輩OdesseyさんのTwentyEleven図解ページが参考になりますよ。

http://8bitodyssey.com/archives/2923

お品書き










HTML5で作られた配布テーマの色々

その５

http://wordpress.org/extend/themes/ HTML5で検索をかけると、テーマは現在（2/16）16本あります。自分の作りたいレイアウトに近いテーマをダウンロードして、勉強してみるのもいいと思います。

HTML5で作られた配布テーマの色々

その５

おすすめのフリーテーマ：ToolBox http://wordpress.org/extend/themes/toolbox

automatic社が作成したフリーテーマ必要最低限の要素だけで構成されている。

お品書き










使えるプラグイン

その７

WP Total Hacks

wp-db-backup

Ktai Style

WP PageNavi

lightbox-2

WP Social Book Marking light

Breadcrumb NavXT

管理画面を容易にカスタマイズデータベースの定期バックアップ携帯サイトへの変換プラグページナビゲーション画像ポップアップ表示 Twitterやfacebookと連携させるボタンパンくず表示

お品書き










トラブったときの対処方法

その８

１.プラグインを全て無効化するダッシュボードに入れなくなった時は、FFTPなどから直接、プラグインフォルダへいき、手元に保存した上で全て削除してみましょ

う。その後、1つ1つプラグインを有効化して検証していきます。よくあるトラブルの1つがプラグインがWordPressのバージョンやテーマに合っていない場合です。

トラブったときの対処方法

その８

2.DBのバックアップをとった後、再インストールしてみる究極の対処方法です。何をしても原因が分からない場合は諦めて再インストールしましょう。その際は、全ての設定方法をメモっておいてDBのバックアップをとった後で行います。バックアップは、wp-db-backupというプラグインを使って定期的に取得しておくこともできますし、MySQLに直接アクセスして、落としてくる方法の2通りあります。 MySQLから直接バックアップをとる方法が確実でおすすめです。

まずはインストールしてカスタマイズしてみよう

最後に

子テーマカスタマイズでPHPをさわらなくても十分自分好みのデザインに変身させることが可能です。

とにかく「触って作ってみる」ことが慣れへの一歩です(^O^)/ 分からないことはWordBench神戸・大阪の勉強会で質問すればベテランさんが教えてくれますよ！こちらも是非ご参加ください。ご清聴ありがとうございました♪

Design

PHPをさわらず作る！デザイナーさんのためのWordPress【超！初級】