WordPressのABC


      早春CMSまつり

        発表資料

        @twikaz
WordBench愛媛
WordBench愛媛
告知~




  告知~
告知~




  あの!
告知~


      DevLOVEが
告知~


      DevLOVEが
  DevLOVEが
告知~


      DevLOVEが
  DevLOVEが
DevLOVEが
告知~




  四国に
告知~




 やってくる
告知~


!!!!!!
!!!!!!
!!!!!!
告知~



  DevLOVE四国
  2013年4月20日
      土曜日
告知~




 in 高松
告知~




 devlove-459.doorkeeper.jp
告知~




  3月5日(火)18:30 - 21:30
WordPressのABC


  A … 投稿
  B … 固定ページ
  C … カスタム投稿
WordPressのABC




 の前に
WordPressのABC




  本日のレシピ
本日のレシピ

レンタルサーバ …    炉理ぽっぷ・レンタルサーバ
               ここをクリック!!




独自ドメイン      … お好みで
WordPress   … 新鮮なもの
テーマ         … 適宜
プラグイン       … 少々
本日のテーマ

    これです
本日のテーマ




 「おすすめ」からピックアップ
本日のテーマ




                     Responsive



 http://themeid.com/responsive-theme/
本日のテーマ - Responsive
テーマ利用の注意点

  フリーのテーマを利用

    カスタマイズ

    テーマの更新

  オリジナルに戻る?!
配布テーマ利用の注意点

    子テーマを作成

     カスタマイズ

    親テーマのVerUp

  カスタマイズ維持できる!?
配布テーマ利用の注意点

    カスタマイズ維持できる!?


 親テーマの更新内容によっては、
 CSSやテンプレートを
 編集し直す必要あり。
http://wpdocs.sourceforge.jp/Child_Themes
テーマ利用の注意点

               子テーマ
http://wpdocs.sourceforge.jp/Child_Themes

style.css (必須)
functions.php (任意)
テンプレートファイル (任意、複数ファイル可)
他のファイル (任意)

※最低限、子テーマ用のフォルダとstyle.cssだけでOK.
※子テーマ作成用プラグインもあります。
子テーマ作成例
子テーマ作成例
子テーマ作成例?
WordPressのABC




   本題~
WordPressのABC




 A…投稿
A … 投稿
   普通に、ブラウザから
A … 投稿
   簡単に記事が書けます。
A … 投稿
     公開前にプレビュー
A … 投稿

  そのほかに、

  メールから

  PCアプリから

  スマホアプリから
A … 投稿
 投稿記事の表示




         一般のブログのスタイル
A … 投稿

外観 -> ウィジェット




 マウスでぐいーっと
A … 投稿 - 投稿記事の表示




           トップページに
           表示
A … 投稿 - 投稿記事の表示




           トピックス表示
           ちょっと狭い?
A … 投稿 - テンプレート編集
<?php
 $lastposts = get_posts('posts_per_page=5');
 foreach($lastposts as $post) :
    setup_postdata($post);
?>

<h3><a href="<?php the_permalink(); ?>"
id="post-<?php the_ID(); ?>"><?php
the_title(); ?></a></h3>

<?php the_excerpt(); ?>
<?php endforeach; ?>
A … 投稿 - 投稿記事の表示

get_posts();
条件を指定して投稿を取得
'posts_per_page=5'
1ページに表示する件数
A … 投稿 - 投稿記事の表示

setup_postdata();
各記事のコンテンツや IDを取得

the_permalink();
記事のパーマリンク,永続的URL
A … 投稿 - 投稿記事の表示

the_ID(),the_title()
記事のID、タイトル

the_excerpt();
記事の抜粋を表示
A … 投稿 - テンプレート編集
<?php

 $lastposts =   get_posts('posts_per_page=5');
 foreach($lastposts as $post) :

     setup_postdata($post);
?>

            the_permalink(); ?>" id="post-<?php
<h3><a href="<?php

the_ID(); ?>"><?php the_title(); ?></a></h3>
<?php   the_excerpt(); ?>
<?php endforeach; ?>




                たったこれだけ?!
A … 投稿 - テンプレート編集

          テンプレート編集




          ウィジェット追加
WordPressのABC




B…固定ページ
B…固定ページ

 About    著作権につ
 会社情報     アクセス
 事業内容     お問合せ
            などなど
B…固定ページ

 [ダッシュボード]->[固定ページ]
B…固定ページ
 [ダッシュボード]->[固定ページ]
B…固定ページ
 公開のオプション

            レビュー待ち
B…固定ページ
 公開のオプション
            レビュー待ち
B…固定ページ
 固定メニュー
B…固定ページ
 メニュー編集
B…固定ページ
 メニュー編集
 固定ページから   カテゴリーから
B…固定ページ
 メニュー編集
 固定ページから



 カテゴリーから
B…固定ページ
 公開ページのメニュー
B…固定ページ
4つのメニューに対応 (Responsiveの場合)
B…固定ページ

          トップメニュー:中央配置



          ヘッダメニュー:プルダウン
WordPressのABC




 C…カスタム投稿
C…カスタム投稿


 投稿…       時系列的、カテゴリ

 固定ページ…    固定的、親子関係

 カスタム投稿… 半固定的、カテゴリ
C…カスタム投稿


 取扱商品        本、写真、動画
 物件情報        FAQ的な
 イベントカレンダー
                 などなど
C…カスタム投稿

 では早速
 WordPress Codex 日本語版
 wpdocs.sourceforge.jp/投稿タイプ

 goo.gl/F6xbL    を参考に
C…カスタム投稿
         functions.phpに追記
add_action('init', 'create_post_type');
function create_post_type() {
  register_post_type('nplab_instrument',
     array(
       'labels' => array(
          'name' => __('Instruments'),
          'singular_name' => __('Instrument')
       ),
       'public' => true
     )
  );
}
C…カスタム投稿
 Instrumentsメニューが追加されました
C…カスタム投稿
    登録してみよう!!
C…カスタム投稿
C…カスタム投稿
      プレビュー!!
C…カスタム投稿
       おや?
C…カスタム投稿




     パーマリンクを更新してみる
C…カスタム投稿
          page.phpをコピー&編集
 $paged = (get_query_var('paged')) ?
 get_query_var('paged') : 1;
 $newloop = new WP_Query(array(
    'post_type' => nplab_instrument,
    'posts_per_page' => 10,
    'paged' => $paged
 ));
 ?>
 <?php if (have_posts()) : ?>
        <?php while ($newloop->have_posts()) :
 $newloop->the_post(); ?>
C…カスタム投稿
 カスタム投稿の一覧(固定)ページを追加
C…カスタム投稿 - 一覧を表示してみる
C…カスタム投稿

さらに

 Taxonomy(タクソノミー)


  カスタム投稿の分類
C…カスタム投稿

さらに、さらに

 今回のカスタム投稿


   プラグイン化
C…カスタム投稿

さらに、さらに、さらに


  カスタム投稿
   プラグイン
C…カスタム投稿

さらに、さらに、さらに、さらに


           素敵な
           デザインに
WordPressのABC


   ご清聴ありがとう
    ございました。

Cms festa-0216