Creator's village in EHIMEとWordBench愛媛の共催セミナー「早春CMS祭り」にて登壇させていただきました。 WordPressの基本的な使い方についてまとめてみました。

1. WordPressのABC
早春CMSまつり
発表資料
@twikaz

2. WordBench愛媛

3. WordBench愛媛

4. 告知～
告知～

5. 告知～
あの!

6. 告知～
DevLOVEが

7. 告知～
DevLOVEが
DevLOVEが

8. 告知～
DevLOVEが
DevLOVEが
DevLOVEが

9. 告知～
四国に

10. 告知～
やってくる

11. 告知～
！！！！！！
！！！！！！
！！！！！！

12. 告知～
DevLOVE四国
2013年4月20日
土曜日

13. 告知～
in 高松

14. 告知～
devlove-459.doorkeeper.jp

15. 告知～
3月5日（火）18:30 - 21:30

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

17. WordPressのABC
の前に

18. WordPressのABC
本日のレシピ

19. 本日のレシピ
レンタルサーバ … 炉理ぽっぷ・レンタルサーバ
ここをクリック！！
独自ドメイン … お好みで
WordPress … 新鮮なもの
テーマ … 適宜
プラグイン … 少々

20. 本日のテーマ
これです

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

22. 本日のテーマ
Responsive
http://themeid.com/responsive-theme/

23. 本日のテーマ - Responsive

24. テーマ利用の注意点
フリーのテーマを利用
カスタマイズ
テーマの更新
オリジナルに戻る?!

25. 配布テーマ利用の注意点
子テーマを作成
カスタマイズ
親テーマのVerUp
カスタマイズ維持できる!?

26. 配布テーマ利用の注意点
カスタマイズ維持できる!?
親テーマの更新内容によっては、
CSSやテンプレートを
編集し直す必要あり。
http://wpdocs.sourceforge.jp/Child_Themes

27. テーマ利用の注意点
子テーマ
http://wpdocs.sourceforge.jp/Child_Themes
style.css (必須)
functions.php (任意)
テンプレートファイル (任意、複数ファイル可)
他のファイル (任意)
※最低限、子テーマ用のフォルダとstyle.cssだけでOK.
※子テーマ作成用プラグインもあります。

28. 子テーマ作成例

29. 子テーマ作成例

30. 子テーマ作成例？

31. WordPressのABC
本題～

32. WordPressのABC
A…投稿

33. A … 投稿
普通に、ブラウザから

34. A … 投稿
簡単に記事が書けます。

35. A … 投稿
公開前にプレビュー

36. A … 投稿
そのほかに、
メールから
PCアプリから
スマホアプリから

37. A … 投稿
投稿記事の表示
一般のブログのスタイル

38. A … 投稿
外観 -> ウィジェット
マウスでぐいーっと

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

40. A … 投稿 - 投稿記事の表示
トピックス表示
ちょっと狭い？

41. 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; ?>

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

43. A … 投稿 - 投稿記事の表示
setup_postdata();
各記事のコンテンツや IDを取得
the_permalink();
記事のパーマリンク,永続的URL

44. A … 投稿 - 投稿記事の表示
the_ID(),the_title()
記事のID、タイトル
the_excerpt();
記事の抜粋を表示

45. 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; ?>
たったこれだけ？！

46. A … 投稿 - テンプレート編集
テンプレート編集
ウィジェット追加

47. WordPressのABC
B…固定ページ

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

49. B…固定ページ
[ダッシュボード]->[固定ページ]

50. B…固定ページ
[ダッシュボード]->[固定ページ]

51. B…固定ページ
公開のオプション
レビュー待ち

52. B…固定ページ
公開のオプション
レビュー待ち

53. B…固定ページ
固定メニュー

54. B…固定ページ
メニュー編集

55. B…固定ページ
メニュー編集
固定ページから カテゴリーから

56. B…固定ページ
メニュー編集
固定ページから
カテゴリーから

57. B…固定ページ
公開ページのメニュー

58. B…固定ページ
4つのメニューに対応 (Responsiveの場合)

59. B…固定ページ
トップメニュー：中央配置
ヘッダメニュー：プルダウン

60. WordPressのABC
C…カスタム投稿

61. C…カスタム投稿
投稿… 時系列的、カテゴリ
固定ページ… 固定的、親子関係
カスタム投稿… 半固定的、カテゴリ

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

63. C…カスタム投稿
では早速
WordPress Codex 日本語版
wpdocs.sourceforge.jp/投稿タイプ
goo.gl/F6xbL を参考に

64. 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
)
);
}

65. C…カスタム投稿
Instrumentsメニューが追加されました

66. C…カスタム投稿
登録してみよう！！

67. C…カスタム投稿

68. C…カスタム投稿
プレビュー！！

69. C…カスタム投稿
おや？

70. C…カスタム投稿
パーマリンクを更新してみる

71. 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(); ?>

72. C…カスタム投稿
カスタム投稿の一覧（固定）ページを追加

73. C…カスタム投稿 - 一覧を表示してみる

74. C…カスタム投稿
さらに
Taxonomy（タクソノミー）
カスタム投稿の分類

75. C…カスタム投稿
さらに、さらに
今回のカスタム投稿
プラグイン化

76. C…カスタム投稿
さらに、さらに、さらに
カスタム投稿
プラグイン

77. C…カスタム投稿
さらに、さらに、さらに、さらに
素敵な
デザインに

78. WordPressのABC
ご清聴ありがとう
ございました。