wordpress 初心者さんが知っておいたほうが良い事&プラグインの紹介
DESCRIPTION
Word bench 大分 発表資料 2014/05/17TRANSCRIPT
![Page 1: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/1.jpg)
WordPress初心者さんが知っておいたほうが良い事&
プラグインの紹介よつばデザイン 後藤賢司
2014.5.17 WordBench 大分
![Page 2: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/2.jpg)
自己紹介よつばデザイン 後藤賢司
出版社~デザイン会社~Web制作会社~企画会社~独立
東京と大分の2拠点で活動中(月の半分ずつ)
Webサイトの企画・デザインやメディアサイトやってます
![Page 3: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/3.jpg)
和菓子が好き
![Page 4: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/4.jpg)
WP-D グリーン
CPIエバンジェリスト
ゼロから始めるWordPress勉強会(facebookグループ)
Webクリエイターのための情報交換所(facebookグループ)
すみだクリクラ
活動
![Page 7: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/7.jpg)
![Page 8: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/8.jpg)
今日の内容1. WordPressについて
2. 知っておいたほうが良い事
3. プラグイン紹介
![Page 9: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/9.jpg)
基礎知識
![Page 10: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/10.jpg)
Webサイトを作るには自分で作れない人
無料ブログサービスを利用する(WordPress、ライブドアブログ、ア
メブロ、Note)。
有料サービスを利用する*。(Jimdo、Wix等、BinD)
-
自分で作る。
![Page 11: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/11.jpg)
WordPressの基礎知識オープンソースのCMS(コンテンツマネジメントシステム)。
GPLというライセンスが適用されている。
![Page 12: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/12.jpg)
WordPressを使うには2通りレンタルブログサービス(公式)とインストール型がある。
賃貸物件か持ち家かみたいなものです。
※今後はインストール型が主流になると言われています。
![Page 14: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/14.jpg)
レンタルサーバーなど自分でWordPressをインストールして利用するには、確認する事があ
る。WordPressがすべてのレンタルサーバーで動く訳ではない。
初心者さんには「かんたんインストール機能」のあるところがオスス
メ。(エックスサーバー、CPI、ロリポップ…)
![Page 15: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/15.jpg)
WordPressは
無料で利用できるCMSです。
![Page 16: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/16.jpg)
ライセンスGPL自由に配布・改変OK。みんなで共有して使っていくという思想で大き
く普及したところもある。
※独自に権利の主張を行う事は出来ない。
この辺はちゃんと調べてみてください。
![Page 17: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/17.jpg)
GPL~Wikipediaより~プログラムの実行
プログラムの動作を調べ、それを改変すること(ソースコードへのア
クセスは、その前提になる)
複製物の再頒布
プログラムを改良し、改良を公衆にリリースする権利(ソースコード
へのアクセスは、その前提になる)
![Page 18: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/18.jpg)
WordPressドメイン名にWordPressを使用してはいけない。
サブドメインやディレクトリ名に使用するのはOK。
![Page 19: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/19.jpg)
WordBench
![Page 20: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/20.jpg)
WordCamp
![Page 21: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/21.jpg)
![Page 22: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/22.jpg)
![Page 23: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/23.jpg)
Schooで月一回配信中
![Page 24: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/24.jpg)
WordPressの仕組み
![Page 25: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/25.jpg)
静的なHTMLと違うところ
![Page 26: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/26.jpg)
HTMLで作られたサイト
HTML CSS
image
記事の内容
![Page 27: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/27.jpg)
WordPress
PHP CSS
image
記事の内容
データベース
![Page 28: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/28.jpg)
データベースを使う。
かんたんインストールにも
若干影響する部分。
![Page 29: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/29.jpg)
PHP
![Page 30: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/30.jpg)
WordPress独自のタグ<?php get_header(); ?>
!
<?php if (is_front_page()): ?>
トップページだけこの部分を表示します。
<?php else: ?>
トップページ以外はこの部分を表示します。
<?php endif; ?>
![Page 31: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/31.jpg)
必要なものから覚えれば良いし、
PHPわからなくても使える
![Page 32: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/32.jpg)
データベース
![Page 33: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/33.jpg)
データを置いてるところ
倉庫みたいなもの
エクセルの表
![Page 34: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/34.jpg)
「ループ」について
![Page 35: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/35.jpg)
お知らせカテゴリーの記事の
最新5件を表示したい
![Page 36: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/36.jpg)
データベースのイメージ
![Page 37: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/37.jpg)
最新5件の記事を取得
![Page 38: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/38.jpg)
お医者さんで診察して
薬局で必要な薬を出してもらう
ような事が行われてる
![Page 39: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/39.jpg)
プログラムが
出来なくても大丈夫
![Page 40: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/40.jpg)
管理画面で設定可能な事も
たくさんあります。
![Page 41: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/41.jpg)
デザインを変える着せ替え人形のようにデザインを変えられます。そのような機能を
WordPressでは「テーマ」と呼びます。
公式ディレクトリには無料で利用できるテーマが2500以上。
![Page 42: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/42.jpg)
デザイン(テーマ)はたくさんある公式ディレクトリのテーマは無料で使えます。
![Page 43: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/43.jpg)
機能を追加するフォーム機能を追加したり、画像が自動で変わるスライダーを追加し
たり簡単に出来る。WordPressではプラグインを使う事で機能を追加
出来ます。
![Page 44: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/44.jpg)
プラグイン(機能拡張)もたくさんある公式ディレクトリのプラグインは無料で使えます。
![Page 45: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/45.jpg)
プラグイン紹介
![Page 46: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/46.jpg)
高機能で便利な Jetpackこれでもかというほど高機能。
ウィジェットの表示条件を
指定できるようになったり、
ソーシャル連携出来たり、
シンプルなアクセス解析を
見る事が出来たり。
https://wordpress.org/plugins/jetpack/
![Page 47: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/47.jpg)
Meta Slider高機能なスライドショーが簡単に作れるプラグイン。
ドラッグアンドドロップで順番を並び替えたり、スライドの種類を選べた
り出来る。
さらに高機能な有料版もある。
!
https://wordpress.org/plugins/ml-slider/
![Page 48: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/48.jpg)
記事を複製できる Duplicate Postほぼ同じ内容で日付だけ変えて
公開したいような場合に便利。
https://wordpress.org/plugins/duplicate-post/
![Page 49: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/49.jpg)
共通で使う要素を管理する Buckets共通パーツをまとめておける。
ショートコードで呼び出し。
営業日とか料金表とか複数のペー
ジで共通で使う場合など。
https://wordpress.org/
plugins/buckets/ショートコードで呼び出し
![Page 50: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/50.jpg)
画像のトリミング指定が出来る Post Thumbnail Editor
画像のトリミング指定が出来る
プラグイン。
個別にトリミング出来るので
微調整したい場合などに便利。
https://wordpress.org/
plugins/post-thumbnail-editor/
![Page 51: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/51.jpg)
ウィジェットにバナーを貼れる Image Widget
HTMLの知識がなくても
ウィジェットエリアにバナーを
貼れるプラグイン。
タイトルを入力しなければ、
画像のみのバナーとして
利用できる。
http://wordpress.org/plugins/image-widget/
![Page 52: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/52.jpg)
アイキャッチ画像を自動で設定してくれる
Auto Post Tumbnail
自動でアイキャッチ画像を設定し
てくれる。サムネイルの設定忘れ
などが無くなる。
クライアントワークの場合、説明
しなくても良い。
http://wordpress.org/plugins/
auto-post-thumbnail/
![Page 53: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/53.jpg)
表側で編集が出来る WordPress Front-end Editor
フロント側で記事の編集ができる。プレビューして確認などの必要が
なくなる。いずれはデフォルトの機能になるかも。
https://wordpress.org/plugins/wp-front-end-editor/
![Page 54: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/54.jpg)
シンプルにお知らせを表示する Notification-Box
シンプルにメッセージを出すための
ウィジェットプラグイン。
テキストウィジェットよりは
もうすこし目立たせたい場合などに。
!
https://github.com/ytbdken/Notification-Box
![Page 55: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/55.jpg)
設定値をいじれば
下の要素とくっつけたり、
連続で表示して簡易的な
デザインアクセントとしても
利用可能。
![Page 56: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/56.jpg)
デフォルトテーマをカスタマイズTwentyTen、TwentyEleven、TwentyTwelve、TwentyThirteen
の4つのカラーリングなどをカスタマイズ可能。
http://wordpress.org/plugins/styles/
![Page 57: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/57.jpg)
フロント側で編集できるWordPress Front-end Editor
管理画面に入らずに記事が書けるWordPress Front-end Editor。
見た目で編集できるので便利。
https://wordpress.org/plugins/wp-front-end-editor/
![Page 58: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/58.jpg)
凝ったレイアウトが可能なPage Builder投稿本文エリアで段組レイアウトが可能になる
http://wordpress.org/plugins/siteorigin-panels/
![Page 59: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/59.jpg)
デモデフォルトテーマでそれっぽく
・スライダー
・フォーム
![Page 60: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/60.jpg)
セキュリティのお話(別セッション)対策方法
認証方法
古いものは使わない
公式ディレクトリ以外のテーマは使わないほうが良い
![Page 61: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/61.jpg)
ログインIDとパスワード初期ユーザー名「admin」は使わない。
パスワードは最低でも8文字以上。
パスワード生成ツールを利用する。
http://www.luft.co.jp/cgi/randam.php
![Page 63: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/63.jpg)
バックアップ機能のあるレンタルサーバーレンタルサーバーの
エックスサーバーやCPIは
バックアップ機能がある。
![Page 64: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介](https://reader033.vdocuments.pub/reader033/viewer/2022052600/557b6401d8b42a0d578b46c7/html5/thumbnails/64.jpg)
ありがとうございました