SlideShare a Scribd company logo
1 of 72
Download to read offline
PHPが苦手なデザイナーでもできる
    簡単WordPressカスタマイズ術




12年8月31日金曜日
さわだ えり
    @erilin86
    フリーランスWeb屋さん
    旅 / ダンス / カメラ / ゲーム




12年8月31日金曜日
12年8月31日金曜日
 PHP、得意ですか?




12年8月31日金曜日
HTMLとCSSは得意。
     デザインも自分で作れる。
     PHPとかjsは、既存のものを設置したりカスタマイズする程度。




12年8月31日金曜日
HTMLとCSSは得意。
     デザインも自分で作れる。
     PHPとかjsは、既存のものを設置したりカスタマイズする程度。




     そんな私が、いきなり
     WordPressをはじめたキッカケ
     それは。。。
12年8月31日金曜日
Wo r d P r e s s の 仕 事 を
        ふられちゃったから




12年8月31日金曜日
Wo r d P r e s s の 仕 事 を
        ふられちゃったから


                    どうしよ!



12年8月31日金曜日
個人ブログとして
              「配布テーマを使う」




12年8月31日金曜日
個人ブログとして
              「配布テーマを使う」




12年8月31日金曜日
 レスポンシブデザイン




12年8月31日金曜日
 管理画面によるカスタマイズ
    カスタムヘッダー
    背景画像/色
    ウィジェット




12年8月31日金曜日
 3.4からの新機能:カスタマイザー




12年8月31日金曜日
「自分でデザインしたい」
               「仕事でオリジナルデザインの
              テーマを作らなければいけない」




12年8月31日金曜日
「自分でデザインしたい」
               「仕事でオリジナルデザインの
              テーマを作らなければいけない」


   ・人が作ったデザインなんて嫌

12年8月31日金曜日
「自分でデザインしたい」
               「仕事でオリジナルデザインの
              テーマを作らなければいけない」


   ・人が作ったデザインなんて嫌
   ・自分でカスタマイズできるようになりたい
12年8月31日金曜日
WordPressサイト構築手順




12年8月31日金曜日
WordPressサイト構築手順
              ① コンテンツの整理




12年8月31日金曜日
WordPressサイト構築手順
              ① コンテンツの整理
              ② WordPress設計




12年8月31日金曜日
WordPressサイト構築手順
              ① コンテンツの整理
              ② WordPress設計
              ③ デザイン作成



12年8月31日金曜日
WordPressサイト構築手順
              ①   コンテンツの整理
              ②   WordPress設計
              ③   デザイン作成
              ④   HTML&CSSコーディング


12年8月31日金曜日
WordPressサイト構築手順
              ①   コンテンツの整理
              ②   WordPress設計
              ③   デザイン作成
              ④   HTML&CSSコーディング
              ⑤   テーマファイル作成
12年8月31日金曜日
12年8月31日金曜日
大事なのは
              ② WordPress設計


12年8月31日金曜日
12年8月31日金曜日
② WordPress設計




12年8月31日金曜日
② WordPress設計

              投稿ページにする?
              固定ページにする?
               ・ニュースとか時系列に並べたいコンテンツ 
               ・基本情報が変わらない会社概要
               ・入れ替えがあるスタッフ紹介ページ


12年8月31日金曜日
12年8月31日金曜日
② WordPress設計




12年8月31日金曜日
② WordPress設計

              カテゴリーはどうする?
               ・今後増えるor増えない
               ・子カテゴリや孫カテゴリがある
               ・1つの記事が複数のカテゴリに属する時がある
               ・カテゴリー別でデザイン変える?


12年8月31日金曜日
12年8月31日金曜日
② WordPress設計




12年8月31日金曜日
② WordPress設計

              投稿フォームはそのまま?
               ・文章ではなくてデータを入力したい
               ・何か印をつけたものだけトップに表示したい
               ・日記の最後に今日のワンココーナーがほしい




12年8月31日金曜日
12年8月31日金曜日
シングルサイトかマルチサイト




12年8月31日金曜日
シングルサイトかマルチサイト

               投稿ページか固定ページ




12年8月31日金曜日
シングルサイトかマルチサイト

                投稿ページか固定ページ

              共通パーツや汎用パーツのチェック




12年8月31日金曜日
シングルサイトかマルチサイト

                   投稿ページか固定ページ

                共通パーツや汎用パーツのチェック

              フォルダ名やファイル名、カテゴリ名を決める




12年8月31日金曜日
シングルサイトかマルチサイト

                   投稿ページか固定ページ

                共通パーツや汎用パーツのチェック

              フォルダ名やファイル名、カテゴリ名を決める

                   動的に出力するところ



12年8月31日金曜日
シングルサイトかマルチサイト

                   投稿ページか固定ページ

                共通パーツや汎用パーツのチェック

              フォルダ名やファイル名、カテゴリ名を決める

                   動的に出力するところ

                   プラグインを使うところ

12年8月31日金曜日
まずは、普段のWeb制作と同じように...




12年8月31日金曜日
まずは、普段のWeb制作と同じように...
         ① PhotoshopやFireworksなどでデザインを作成




12年8月31日金曜日
まずは、普段のWeb制作と同じように...
         ① PhotoshopやFireworksなどでデザインを作成
         ② エディタでいつも通りコーディング




12年8月31日金曜日
header




              sidebar       content




                        footer

12年8月31日金曜日
header




              sidebar       content




                        footer

12年8月31日金曜日
 コーディング段階でブラウザチェック




12年8月31日金曜日
いよいよテーマの作成




12年8月31日金曜日
 テーマの最低限ルール
              必須ファイル              必須コード
                                 /*
                                 Theme Name: テーマ名
                                 Theme URI: テーマの URL
                                 Description: テーマ詳細
         index.php   style.css   Author: テーマ作成者の名前
                                 Author URI: テーマ作成者の URL
                                 Template: 親テーマの定義 (オプション)
                                 Version: バージョン番号 (オプション)
                                 コメント/利用許諾の記述 (あれば)
                                 */

12年8月31日金曜日
 テーマの基本セットを作っておく


              index.php   style.css   funcions.php




12年8月31日金曜日
テンプレートタグを記述する




12年8月31日金曜日
header




              sidebar       content




                        footer

12年8月31日金曜日
header.php    footer.php




              sidebar.php   index.php




12年8月31日金曜日
 CODEXや書籍を活用




12年8月31日金曜日
 条件分岐を使ってシンプルに




12年8月31日金曜日
12年8月31日金曜日
if

12年8月31日金曜日
12年8月31日金曜日
もし カテゴリーが 「アジア」 だったら
               <h1>のテキストを「赤」にする




12年8月31日金曜日
もし カテゴリーが 「アジア」 だったら
               <h1>のテキストを「赤」にする

              もし カテゴリーが 「ヨーロッパ」 だったら
               <h1>のテキストを「青」にする




12年8月31日金曜日
もし カテゴリーが 「アジア」 だったら
               <h1>のテキストを「赤」にする

              もし カテゴリーが 「ヨーロッパ」 だったら
               <h1>のテキストを「青」にする

              どちらでもなかったら
               <h1>のテキストを「緑」にする

12年8月31日金曜日
苦手なものは少ない方がいい!




12年8月31日金曜日
苦手なものは少ない方がいい!

         なるべくテンプレート数をふやさない




12年8月31日金曜日
 スニペットを使って簡単作成




12年8月31日金曜日
12年8月31日金曜日
よく使うテンプレートタグを
      カテゴリー別に登録。
      ワンクリックで簡単便利!




12年8月31日金曜日
よく使うテンプレートタグを
      カテゴリー別に登録。
      ワンクリックで簡単便利!

     <h1>WordBeachNAGOYA</h1>


     <h1><?php the_title(); ?></h1>



12年8月31日金曜日
12年8月31日金曜日
 でもやっぱりPHPが使えるといいね




12年8月31日金曜日
 「よくわかるPHPの教科書」とか




 12年8月31日金曜日
 できること増えて楽しいWPライフ




12年8月31日金曜日
PHPが苦手でもカスタマイズはできます!
        ・WordPressで「できる」ことを覚える
        ・コンテンツを事前にしっかり整理
        ・実装前にWP設計図を考える
        ・テンプレートタグはコピペでOK!


        ・でもやっぱりPHPを少しは覚えとこ!

12年8月31日金曜日
ありがとうございました!
                        手羽先      モーニング        スガキヤ
               天むす

   台湾ラーメン                              味噌カツ

                                          ベトコンラーメン
                 どてかつ
                                              ひつまぶし
              ころうどん
                                        五平餅
   納屋橋饅頭                                      シロノワール
                         コンパルのサンドイッチ
12年8月31日金曜日

More Related Content

Featured

How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 

Featured (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

Word Beach Nagoya