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

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

WordPressカスタマイズ実践2012

自己紹介

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

@uemera uemura

XOOPS勉強会準備

JavaScript

WordPress

サーバインフラ

PHPフレームワークFuelPHP、CodeIgniter

最近のオレ

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

jQuery

主に技術サポート

WordBench, サーバ関係

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

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

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

2012.10時点のトレンド

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

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

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

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

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

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

CMSで作りましょう

客 制作者

でも安くないとヤダよ

( WordPressかなぁ... )

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

( WordPressかなぁ... )

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

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

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

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

・WordPressって言えばモテる

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

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

・ネットに情報が多い

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

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

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

・ 顧客を囲い込めない

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

WordPress実践

テーマ(外観)を

選ぶ、作る

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

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

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

約800のテーマから選べる

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

カスタマイズ

リアルタイム編集

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

wordpress

wp-­‐contentthemestwentyeleven

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

header.php

content.php

sidebar.php

footer.php

index.php

content.php

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

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

インデックスページ用

footer.phpフッタ用

content.php記事コンテンツ用

header.phpヘッダ用

sidebar.phpサイドバー用

スタイルシート

<?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が用意している関数

<?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記事分を表示

テンプレートタグ

詳しくは

で検索！

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

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

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

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

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

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

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

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

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

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

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

index.php

index.php

index.php

index.php

category.php

date.php

優先

優先

single.php優先

archive.php優先

archive.php優先

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

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

(無くてもOK)

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

(無くてもOK)

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

(必須)

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

テンプレート階層

詳しくは

で検索！

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

投 稿

固定ページ

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

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

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

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

投稿タイプは3つある

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

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

hirosue

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

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

Custom Post Type追加

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

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

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

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

投 稿

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

固定ページ

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

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

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

お し ら せ

スタッフブログ

商品案内

H O M E

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

カスタム投稿タイプ

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

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

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

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

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

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

ありがとうございました