64
WordPress 初心者さんが知っておいたほうが良い事& プラグインの紹介 よつばデザイン 後藤賢司 2014.5.17 WordBench 大分

WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

Embed Size (px)

DESCRIPTION

Word bench 大分 発表資料 2014/05/17

Citation preview

Page 1: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

WordPress初心者さんが知っておいたほうが良い事&

プラグインの紹介よつばデザイン 後藤賢司

2014.5.17 WordBench 大分

Page 2: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

自己紹介よつばデザイン 後藤賢司

出版社~デザイン会社~Web制作会社~企画会社~独立

東京と大分の2拠点で活動中(月の半分ずつ)

Webサイトの企画・デザインやメディアサイトやってます

Page 3: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

和菓子が好き

Page 4: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

WP-D グリーン

CPIエバンジェリスト

ゼロから始めるWordPress勉強会(facebookグループ)

Webクリエイターのための情報交換所(facebookグループ)

すみだクリクラ

活動

Page 5: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

COCOmag

子どもと一緒の毎日を

楽しく、可愛くする情報

(メディアサイト)

http://COCOmag.net

Page 6: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

よろずサウンド

著作権フリーのBGM販売サイト

yorozusound.com

Page 7: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介
Page 8: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

今日の内容1. WordPressについて

2. 知っておいたほうが良い事

3. プラグイン紹介

Page 9: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

基礎知識

Page 10: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

Webサイトを作るには自分で作れない人

無料ブログサービスを利用する(WordPress、ライブドアブログ、ア

メブロ、Note)。

有料サービスを利用する*。(Jimdo、Wix等、BinD)

-

自分で作る。

Page 11: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

WordPressの基礎知識オープンソースのCMS(コンテンツマネジメントシステム)。

GPLというライセンスが適用されている。

Page 12: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

WordPressを使うには2通りレンタルブログサービス(公式)とインストール型がある。

賃貸物件か持ち家かみたいなものです。

※今後はインストール型が主流になると言われています。

Page 13: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

WordPress.com公式サービス。

レンタルブログ型。

アメーバブログや

ライブドアブログに近い。

有料オプションが豊富。

Page 14: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

レンタルサーバーなど自分でWordPressをインストールして利用するには、確認する事があ

る。WordPressがすべてのレンタルサーバーで動く訳ではない。

初心者さんには「かんたんインストール機能」のあるところがオスス

メ。(エックスサーバー、CPI、ロリポップ…)

Page 15: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

WordPressは

無料で利用できるCMSです。

Page 16: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

ライセンスGPL自由に配布・改変OK。みんなで共有して使っていくという思想で大き

く普及したところもある。

※独自に権利の主張を行う事は出来ない。

この辺はちゃんと調べてみてください。

Page 17: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

GPL~Wikipediaより~プログラムの実行

プログラムの動作を調べ、それを改変すること(ソースコードへのア

クセスは、その前提になる)

複製物の再頒布

プログラムを改良し、改良を公衆にリリースする権利(ソースコード

へのアクセスは、その前提になる)

Page 18: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

WordPressドメイン名にWordPressを使用してはいけない。

サブドメインやディレクトリ名に使用するのはOK。

Page 19: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

WordBench

Page 20: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

WordCamp

Page 21: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介
Page 22: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介
Page 23: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

Schooで月一回配信中

Page 24: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

WordPressの仕組み

Page 25: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

静的なHTMLと違うところ

Page 26: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

HTMLで作られたサイト

HTML CSS

image

記事の内容

Page 27: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

WordPress

PHP CSS

image

記事の内容

データベース

Page 28: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

データベースを使う。

かんたんインストールにも

若干影響する部分。

Page 29: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

PHP

Page 30: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

WordPress独自のタグ<?php get_header(); ?> 

!

<?php if (is_front_page()): ?>

トップページだけこの部分を表示します。

<?php else: ?>

トップページ以外はこの部分を表示します。

<?php endif; ?>

Page 31: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

必要なものから覚えれば良いし、

PHPわからなくても使える

Page 32: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

データベース

Page 33: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

データを置いてるところ

倉庫みたいなもの

エクセルの表

Page 34: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

「ループ」について

Page 35: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

お知らせカテゴリーの記事の

最新5件を表示したい

Page 36: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

データベースのイメージ

Page 37: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

最新5件の記事を取得

Page 38: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

お医者さんで診察して

薬局で必要な薬を出してもらう

ような事が行われてる

Page 39: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

プログラムが

出来なくても大丈夫

Page 40: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

管理画面で設定可能な事も

たくさんあります。

Page 41: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

デザインを変える着せ替え人形のようにデザインを変えられます。そのような機能を

WordPressでは「テーマ」と呼びます。

公式ディレクトリには無料で利用できるテーマが2500以上。

Page 42: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

デザイン(テーマ)はたくさんある公式ディレクトリのテーマは無料で使えます。

Page 43: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

機能を追加するフォーム機能を追加したり、画像が自動で変わるスライダーを追加し

たり簡単に出来る。WordPressではプラグインを使う事で機能を追加

出来ます。

Page 44: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

プラグイン(機能拡張)もたくさんある公式ディレクトリのプラグインは無料で使えます。

Page 45: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

プラグイン紹介

Page 46: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

高機能で便利な Jetpackこれでもかというほど高機能。

ウィジェットの表示条件を

指定できるようになったり、

ソーシャル連携出来たり、

シンプルなアクセス解析を

見る事が出来たり。

https://wordpress.org/plugins/jetpack/

Page 47: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

Meta Slider高機能なスライドショーが簡単に作れるプラグイン。

ドラッグアンドドロップで順番を並び替えたり、スライドの種類を選べた

り出来る。

さらに高機能な有料版もある。

!

https://wordpress.org/plugins/ml-slider/

Page 48: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

記事を複製できる Duplicate Postほぼ同じ内容で日付だけ変えて

公開したいような場合に便利。

https://wordpress.org/plugins/duplicate-post/

Page 49: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

共通で使う要素を管理する Buckets共通パーツをまとめておける。

ショートコードで呼び出し。

営業日とか料金表とか複数のペー

ジで共通で使う場合など。

https://wordpress.org/

plugins/buckets/ショートコードで呼び出し

Page 50: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

画像のトリミング指定が出来る Post Thumbnail Editor

画像のトリミング指定が出来る

プラグイン。

個別にトリミング出来るので

微調整したい場合などに便利。

https://wordpress.org/

plugins/post-thumbnail-editor/

Page 51: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

ウィジェットにバナーを貼れる Image Widget

HTMLの知識がなくても

ウィジェットエリアにバナーを

貼れるプラグイン。

タイトルを入力しなければ、

画像のみのバナーとして

利用できる。

http://wordpress.org/plugins/image-widget/

Page 52: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

アイキャッチ画像を自動で設定してくれる

Auto Post Tumbnail

自動でアイキャッチ画像を設定し

てくれる。サムネイルの設定忘れ

などが無くなる。

クライアントワークの場合、説明

しなくても良い。

http://wordpress.org/plugins/

auto-post-thumbnail/

Page 53: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

表側で編集が出来る WordPress Front-end Editor

フロント側で記事の編集ができる。プレビューして確認などの必要が

なくなる。いずれはデフォルトの機能になるかも。

https://wordpress.org/plugins/wp-front-end-editor/

Page 54: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

シンプルにお知らせを表示する Notification-Box

シンプルにメッセージを出すための

ウィジェットプラグイン。

テキストウィジェットよりは

もうすこし目立たせたい場合などに。

!

https://github.com/ytbdken/Notification-Box

Page 55: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

設定値をいじれば

下の要素とくっつけたり、

連続で表示して簡易的な

デザインアクセントとしても

利用可能。

Page 56: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

デフォルトテーマをカスタマイズTwentyTen、TwentyEleven、TwentyTwelve、TwentyThirteen

の4つのカラーリングなどをカスタマイズ可能。

http://wordpress.org/plugins/styles/

Page 57: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

フロント側で編集できるWordPress Front-end Editor

管理画面に入らずに記事が書けるWordPress Front-end Editor。

見た目で編集できるので便利。

https://wordpress.org/plugins/wp-front-end-editor/

Page 58: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

凝ったレイアウトが可能なPage Builder投稿本文エリアで段組レイアウトが可能になる

http://wordpress.org/plugins/siteorigin-panels/

Page 59: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

デモデフォルトテーマでそれっぽく

・スライダー

・フォーム

Page 60: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

セキュリティのお話(別セッション)対策方法

認証方法

古いものは使わない

公式ディレクトリ以外のテーマは使わないほうが良い

Page 61: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

ログインIDとパスワード初期ユーザー名「admin」は使わない。

パスワードは最低でも8文字以上。

パスワード生成ツールを利用する。

http://www.luft.co.jp/cgi/randam.php

Page 62: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

バックアップサービスを利用するhttps://vaultpress.com/

Page 63: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

バックアップ機能のあるレンタルサーバーレンタルサーバーの

エックスサーバーやCPIは

バックアップ機能がある。

Page 64: WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介

ありがとうございました