62
2012.10.18 WordBench神戸 上村崇 第16回 岡山WEBクリエイターズ 「jQuery・WordPress実践2012」 WordPress カスタマイズ実践2012

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

Embed Size (px)

DESCRIPTION

WordPressの導入からかすたまいずm

Citation preview

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

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

WordPressカスタマイズ実践2012

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

自己紹介

• 上村崇 ( うえむらたかし ) • フリーランスのシステムエンジニア• サーバインフラ、組込みシステム、Web とか。• IT 業界のキャリア 10 年ちょっと• 兵庫県西宮市在住

@uemera uemura

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

XOOPS勉強会準備

JavaScript

WordPress

サーバインフラ

PHPフレームワークFuelPHP、CodeIgniter

最近のオレ

さくらVPS(CentOS)、LAMP、メールサーバ、git、samba、netatalk

jQuery

主に技術サポート

WordBench, サーバ関係

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

岡山もあるよ。でも活動休止中?

神戸に在籍WordPressのコミュニティ

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

4月に、「春のCMS徹底比較バトル」でお話させてもらいました。

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

2012.10時点のトレンド

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

WordPressの天下はいつまで続く? WordPressの現状と未来http://prezi.com/dnuvx7wirgee/wordpress-wordpress-web/

詳しくは過去の資料をご覧ください。

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

今日は、「理論ではなく、WordPressを実践するための基礎知識」をご紹介します。

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

その前に、「なぜWordPressで作るのですか?」「WordPressじゃないといけないのでしょうか?」

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

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

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

CMSで作りましょう

客 制作者

でも安くないとヤダよ

( WordPressかなぁ... )

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

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

( WordPressかなぁ... )

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

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

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

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

制作者側からみた、WordPressで作るメリット

・WordPressって言えばモテる

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

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

・ネットに情報が多い

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

制作者側からみた、WordPressで作るデメリット

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

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

・ 顧客を囲い込めない

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

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

WordPress実践

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

テーマ(外観)を

選ぶ、作る

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

自分でテーマを作らなくても、フリーのテーマは無数にあります

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

・管理画面上でテーマインストール可能。・ファイルをFTPなどでアップロードする必要はない。

外 観 テーマのインストール

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

約800のテーマから選べる

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

テーマを自分でカスタマイズする場合は?

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

カスタマイズ

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

リアルタイム編集

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

もっとガッツリとテーマ編集したい?テーマファイルを直接編集する必要があります

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

wordpress

wp-­‐contentthemestwentyeleven

テーマファイルの置き場所

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

header.php

content.php

sidebar.php

footer.php

index.php

content.php

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

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

必要なファイルは限られているindex.php

インデックスページ用

footer.phpフッタ用

content.php記事コンテンツ用

header.phpヘッダ用

sidebar.phpサイドバー用

スタイルシート

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

<?php  get_header();  ?><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());  ?>     <?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.',  'twentyeleven'  );  ?></p>         <?php  get_search_form();  ?>       </div><!-­‐-­‐  .entry-­‐content  -­‐-­‐>     </article><!-­‐-­‐  #post-­‐0  -­‐-­‐>

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

<?php  get_sidebar();  ?><?php  get_footer();  ?>

index.phpheader.php

sidebar.php

footer.php

content.php

テンプレートタグというWordPressが用意している関数

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

<?php  get_header();  ?><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());  ?>     <?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.',  'twentyeleven'  );  ?></p>         <?php  get_search_form();  ?>       </div><!-­‐-­‐  .entry-­‐content  -­‐-­‐>     </article><!-­‐-­‐  #post-­‐0  -­‐-­‐>

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

<?php  get_sidebar();  ?><?php  get_footer();  ?>

index.php

テンプレートタグ

1記事分を表示

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

テンプレートタグ

詳しくは

で検索!

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

WordPress Codexテンプレートタグ リファレンス

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

テンプレートファイルが適用されるルール

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

シングルページ(1記事のみのページ)

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

日付ごとページ(月毎に分けたページ一覧)

インデックスページシングルページカテゴリーごとページ日付ごとページ

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

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

シングルページ(1記事のみのページ)

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

日付ごとページ(月毎に分けたページ一覧)

index.php

index.php

index.php

index.php

category.php

date.php

優先

優先

single.php優先

archive.php優先

archive.php優先

テンプレートファイルが適用されるルール

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

archive.phpアーカイブページ用

(無くてもOK)

category.phpカテゴリーページ用

(無くてもOK)

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

(必須)

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

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

テンプレート階層

詳しくは

で検索!

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

ブログ、固定ページ、カスタムページの違いそれぞれの役割をちゃんと理解しよう

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

投 稿

固定ページ

ブログを投稿するのに使う

静的ページを作るのに使う

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

固定ページはここに出る例えば・特定商取引・個人情報保護方針・交通アクセス

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

投稿固定ページカスタム投稿タイプ

投稿タイプは3つある

これを覚えるとWordPressのカスタムの幅がぐっと広がる!

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

Typesプラグインでカスタム投稿タイプを使う

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

hirosue

広末涼子プラグイン - 新規追加

管理画面からプラグインの追加ができる!

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

Custom Post Type追加

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

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

大都会岡山大都会岡山(人が識別するための名前)

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

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

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

投 稿

大都会岡山のカスタム投稿タイプができた!

固定ページ

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

大都会岡山の記事書き放題!

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

http://xxx.xxx/?post_type=okayama

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

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

お し ら せ

スタッフブログ

商品案内

H O M E

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

カスタム投稿タイプ

カスタム投稿タイプが役に立つ例

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

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

お問い合わせフォームはどう作る?

Page 47: WordPress実践 導入からカスタマイズまで
Page 48: WordPress実践 導入からカスタマイズまで

問い合わせフォームの入力項目をカスタマイズ出来る。

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

データのバックアップはどうすればいい?

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

BackWPupプラグイン最強

・ファイルとDBの両方バックアップ・バックアップファイルをFTP転送・スケジュール実行できる・実行結果をメール通知できる・DropBox/AmazonS3/GoogleStorage/ MicrosoftAzure/Rackspace Cloud にも転送可能・リストアがブラウザからできる・ただし英語

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

便利なプラグイン紹介

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

携帯対応: Ktai Stileプラグイン

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

スマートフォン対応: WPtouchプラグイン

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

ショッピングカート: Welcartプラグイン

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

インストールにおすすめのレンタルサーバ

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

簡単インストール機能で時間節約こんなサーバーを選ぼう!・WordPressの簡単インストール機能あり・新しいバージョンを使用していること php 5.2.4以上 MySQL 5以上・phpがセーフモード動作のサーバーは避けた方が 良い(xreaとかcoreserverとか)

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

初期費用 3950円 月額 1500円

2ステップでDB作成とファイル設置まで完了

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

ロリポプラン初期費用 1575円月額 315円

3ステップでDB作成とファイル設置まで完了

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

最後に

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

イベントめじろ押し!WordPress関連イベント一覧

WordBench東京、大阪などはUstream配信アリ

http://wordbench.org

Page 61: WordPress実践 導入からカスタマイズまで
Page 62: WordPress実践 導入からカスタマイズまで

ありがとうございました