WordPress
カスタマイズ実践2012




2012.10.18 WordBench神戸 上村崇
第16回 岡山WEBクリエイターズ
「jQuery・WordPress実践2012」
自己紹介
      @uemera   uemura



• 上村崇 ( うえむらたかし )
• フリーランスのシステムエンジニア
• サーバインフラ、組込みシステム、Web とか。
• IT 業界のキャリア 10 年ちょっと
• 兵庫県西宮市在住
最近のオレ
                 XOO PS
             勉強会準備
              WordBench,
              サーバ関係
                              PHPフレームワーク
                                FuelPHP、CodeIgniter
 JavaScript
    jQuery




  WordPress
主に技術サポート                         さくらVPS(CentOS)、LAMP、
                               メールサーバ、git、samba、netatalk
                           サーバインフラ
WordPressのコミュニティ

            神戸に在籍



                    岡山もあるよ。
                    でも活動休止中?
4月に、「春のCMS徹底比較バトル」
でお話させてもらいました。
2012.10時点のトレンド
詳しくは過去の資料をご覧ください。




    WordPressの天下はいつまで続く? WordPressの現状と未来
    http://prezi.com/dnuvx7wirgee/wordpress-wordpress-web/
今日は、
「理論ではなく、WordPressを実践するための基礎知識」
をご紹介します。
その前に、
「なぜWordPressで作るのですか?」
「WordPressじゃないといけないのでしょうか?」


なんでもかんでもWordPressではなく、
「WordPressで作った方が有利」な場合に採用するように
しましょう。
客                           制作者

    自分で記事編集したいんだよね


      CMSで作りましょう


    でも安くないとヤダよ


      ( WordPressかなぁ... )
PCだけじゃなくて、スマホや携帯からも更
新したい

ガラケーでも見られるようにして


ブログ3つ必要なんだよね


もしかしたらあとで機能追加あるかも



   ( WordPressかなぁ... )
制作者側からみた、
WordPressで作るメリット

    ・WordPressって言えばモテる

    ・実績になる、次につながりやすい

    ・CMSのデファクトスタンダードなので安心


    ・ネットに情報が多い
制作者側からみた、
WordPressで作るデメリット

    ・ phpをある程度知っておかないといけない


    ・ WordPressの制作単価は下がる傾向にある。


    ・ 顧客を囲い込めない
WordPress実践




・外観(テーマ)を選ぶ、カスタマイズする
・ブログ、固定ページ、カスタムページの違い
・お問い合わせフォームはどう作る?
・データのバックアップはどうする?
・おすすめプラグイン
・インストールにおすすめのレンタルサーバ
テーマ(外観)を

    選ぶ、作る
自分でテーマを作らなくても、
フリーのテーマは無数にあります
テーマのインストール
外 観




・管理画面上でテーマインストール可能。
・ファイルをFTPなどでアップロードする必要はない。
約800のテーマから選べる
テーマを自分でカスタマイズする場合は?
カスタマイズ
リアルタイム編集
もっとガッツリとテーマ編集したい?
テーマファイルを直接編集する必要があります
テーマファイルの置き場所
wordpress


  wp-­‐content
   themes
    twentyeleven
index.php


        header.php



   content.php
                     sidebar.php

   content.php

            footer.php
テーマフォルダに入っているファイル

     content.php
    記事コンテンツ用                      footer.php
                                   フッタ用



header.php
 ヘッダ用




                      index.php
                    インデックスページ用




必要なファイルは限られている
                                  スタイルシート
              sidebar.php
              サイドバー用
<?php	
  get_header();	
  ?>                                                                   header.php                                                                   index.php
<div	
  id="primary">
	
        <div	
  id="content"	
  role="main">



	
            <?php	
  if	
  (	
  have_posts()	
  )	
  :	
  ?>
	
            	
     <?php	
  twentyeleven_content_nav(	
  'nav-­‐above'	
  );	
  ?>

	
            	
     <?php	
  /*	
  Start	
  the	
  Loop	
  */	
  ?>
       	
            <?php	
  while	
  (	
  have_posts()	
  )	
  :	
  the_post();	
  ?>     content.php
       	
            	
  <?php	
  get_template_part('content',	
  get_post_format());	
  ?>
	
            	
     <?php	
  endwhile;	
  ?>
	
  


	
  
              	
  

                           テンプレートタグ という
                     <?php	
  twentyeleven_content_nav(	
  'nav-­‐below'	
  );	
  ?>


              <?php	
  else	
  :	
  ?>
	
  
	
  
	
  
              	
  
              	
  
              	
  
                     	
  
                     	
  
                                                    WordPressが用意している関数
                     <article	
  id="post-­‐0"	
  class="post	
  no-­‐results	
  not-­‐found">
                            <header	
  class="entry-­‐header">
                            	
        <h1	
  class="entry-­‐title"><?php	
  _e(	
  'Nothing	
  Found',	
  'twentyeleven'	
  );	
  ?></h1>
	
            	
     	
     </header><!-­‐-­‐	
  .entry-­‐header	
  -­‐-­‐>

	
            	
     	
     <div	
  class="entry-­‐content">
	
            	
     	
     	
         <p><?php	
  _e(	
  'Apologies,	
  but	
  no	
  results	
  were	
  found	
  for	
  the	
  requested	
  archive.	
  Perhaps	
  searching	
  will	
  help	
  find	
  a	
  related	
  post.'
	
            	
     	
     	
         <?php	
  get_search_form();	
  ?>
	
            	
     	
     </div><!-­‐-­‐	
  .entry-­‐content	
  -­‐-­‐>
	
            	
     </article><!-­‐-­‐	
  #post-­‐0	
  -­‐-­‐>


	
            <?php	
  endif;	
  ?>
	
     </div><!-­‐-­‐	
  #content	
  -­‐-­‐>
</div><!-­‐-­‐	
  #primary	
  -­‐-­‐>


<?php	
  get_sidebar();	
  ?>                                                                 sidebar.php
<?php	
  get_footer();	
  ?>                                                                  footer.php
<?php	
  get_header();	
  ?>                                                                                                                                                index.php
<div	
  id="primary">
	
        <div	
  id="content"	
  role="main">

                                                                                                                       テンプレートタグ
	
            <?php	
  if	
  (	
  have_posts()	
  )	
  :	
  ?>
	
            	
     <?php	
  twentyeleven_content_nav(	
  'nav-­‐above'	
  );	
  ?>

	
            	
     <?php	
  /*	
  Start	
  the	
  Loop	
  */	
  ?>
       	
            <?php	
  while	
  (	
  have_posts()	
  )	
  :	
  the_post();	
  ?>

       	
            	
  <?php	
  get_template_part('content',	
  get_post_format());	
  ?>
                                                                                                                 1記事分を表示
	
            	
     <?php	
  endwhile;	
  ?>
	
            	
     <?php	
  twentyeleven_content_nav(	
  'nav-­‐below'	
  );	
  ?>


	
            <?php	
  else	
  :	
  ?>
	
            	
     <article	
  id="post-­‐0"	
  class="post	
  no-­‐results	
  not-­‐found">
	
            	
     	
     <header	
  class="entry-­‐header">
	
            	
     	
     	
        <h1	
  class="entry-­‐title"><?php	
  _e(	
  'Nothing	
  Found',	
  'twentyeleven'	
  );	
  ?></h1>
	
            	
     	
     </header><!-­‐-­‐	
  .entry-­‐header	
  -­‐-­‐>

	
            	
     	
     <div	
  class="entry-­‐content">
	
            	
     	
     	
         <p><?php	
  _e(	
  'Apologies,	
  but	
  no	
  results	
  were	
  found	
  for	
  the	
  requested	
  archive.	
  Perhaps	
  searching	
  will	
  help	
  find	
  a	
  related	
  post.'
	
            	
     	
     	
         <?php	
  get_search_form();	
  ?>
	
            	
     	
     </div><!-­‐-­‐	
  .entry-­‐content	
  -­‐-­‐>
	
            	
     </article><!-­‐-­‐	
  #post-­‐0	
  -­‐-­‐>


	
            <?php	
  endif;	
  ?>
	
     </div><!-­‐-­‐	
  #content	
  -­‐-­‐>
</div><!-­‐-­‐	
  #primary	
  -­‐-­‐>


<?php	
  get_sidebar();	
  ?>
<?php	
  get_footer();	
  ?>
詳しくは


テンプレートタグ


    で検索!
WordPress Codex
テンプレートタグ リファレンス
テンプレートファイルが適用されるルール


インデックスページ
(最新投稿順の一覧ページ)


シングルページ
                カテゴリーごとページ
                インデックスページ
                 シングルページ
                  日付ごとページ
(1記事のみのページ)


カテゴリーごとページ
(カテゴリごとに分けたページ一覧)



日付ごとページ
(月毎に分けたページ一覧)
テンプレートファイルが適用されるルール


インデックスページ
(最新投稿順の一覧ページ)
                    index.php

                                優先
シングルページ
(1記事のみのページ)         index.php   single.php
                                優先             優先
カテゴリーごとページ
(カテゴリごとに分けたページ一覧)   index.php   archive.php   category.php
                                優先             優先
日付ごとページ
(月毎に分けたページ一覧)       index.php   archive.php   date.php
archive.php          category.php
アーカイブページ用             カテゴリーページ用
 (無くてもOK)                 (無くてもOK)




                  index.php
                インデックスページ用
                   (必須)




                  single.php
                 シングルページ用
                  (無くてもOK)
詳しくは


テンプレート階層


   で検索!
ブログ、固定ページ、
カスタムページの違い
それぞれの役割をちゃんと理解しよう
投   稿   ブログを投稿する
        のに使う



固定ページ   静的ページを作るの
        に使う
固定ページはここに出る
例えば
・特定商取引
・個人情報保護方針
・交通アクセス
投稿タイプは3つある
投稿
固定ページ
カスタム投稿タイプ

これを覚えると
WordPressのカスタムの
幅がぐっと広がる!
Typesプラグインでカスタム投稿タイプを使う
プラグイン - 新規追加
                     広


   管理画面からプラグインの追加ができる!
Custom Post Type追加
大都会岡山
                        大都会岡山
                        (人が識別するための名前)



                    okayama
                    (URLとして使用される文字列)




Costom post type: カスタム投稿タイプのこと
スラグ: URLに使うためのページ固有の文字列のこと

 画面の一番下にある「CustomPostTypeを保存」をクリックして保存する
投   稿

固定 ペー ジ

大都会岡山のカスタム投稿タイプができた!
大都会岡山の記事書き放題!
http://xxx.xxx/?post_type=okayama


               ?post_type=okayama
               とすることで、大都会岡山の
               投稿タイプの一覧ページが見
               られる。
               okamayaはスラッグ名
カスタム投稿タイプが役に立つ例

HOME


        おしらせ     投稿(カテゴリ=おしらせ)

       スタッフブログ   投稿(カテゴリ=スタッフブログ)

        商品案内     カスタム投稿タイプ
お問い合わせフォームはどう作る?
問い合わせフォームの入
力項目をカスタマイズ出
来る。
データのバックアップはどうすればいい?
BackWPupプラグイン最強

  ・ファイルとDBの両方バックアップ
  ・バックアップファイルをFTP転送
  ・スケジュール実行できる
  ・実行結果をメール通知できる
  ・DropBox/AmazonS3/GoogleStorage/
   MicrosoftAzure/Rackspace Cloud
   にも転送可能
  ・リストアがブラウザからできる
  ・ただし英語
便利なプラグイン紹介
携帯対応: Ktai Stileプラグイン
スマートフォン対応: WPtouchプラグイン
ショッピングカート: Welcartプラグイン
インストールにおすすめの
レンタルサーバ
簡単インストール機能で時間節約
こんなサーバーを選ぼう!
・WordPressの簡単インストール機能あり
・新しいバージョンを使用していること
   php 5.2.4以上
   MySQL 5以上
・phpがセーフモード動作のサーバーは避けた方が
 良い(xreaとかcoreserverとか)
初期費用 3950円
            月額 1500円




2ステップでDB作成とファイル設置まで完了
ロリポプラン
              初期費用 1575円
              月額    315円




3ステップでDB作成とファイル設置まで完了
最後に
イベントめじろ押し!
          WordPress関連イベント一覧
                       WordBench東京、大阪などは
                                Ustream配信アリ




http://wordbench.org
ありがとうございました

WordPress実践 導入からカスタマイズまで