[修正版]大学生によるWordPress活用事例紹介 -1-大学生にこそ普及してほしいWordPress

大学生によるWordPress活用事例紹介

WordFes Nagoya 2016 | WordPress の森に集おう！

大学生にこそ普及してほしいWordPress

魚住諒

愛知産業大学短期大学通信教育部


自己紹介

• 愛知産業大学短期大学通信教育学部　国際コミュケーション学科

• トランペットとPC・ガジェット系が好き

• 2013年8月29日よりWordPressでのブログをはじめる(現:http://ryo.nagoya)

• WordFes Nagoya 2016より実行委員として初参加

• Twitter : @ryoraspp

• Facebook : https://www.facebook.com/blog.ryoraspp/

魚住　諒


http://ryo.nagoya

アジェンダ• なぜ大学生にWordPressが普及しないのか

• ところでWordPressとは何か

• PHP,HTML5,CSS3とは

• オススメするテーマ&プラグイン

• 記事を書く時に覚えておいたほうがいいHTMLの要素

• WordPressでのコミュニティサイトの作り方

• 大学生が作ったサイトの紹介


なぜ大学生にWordPress普及しないのか

• WordPressって何か難しそう

• WordPressは費用かかる

• そもそも大学生にWordPressの認知度が低い

• 不満はあるけど無料サイト作成サービスや無料ブログサービスで何とかなる


実はWordPressを使うことで、もっと自由な、魅力的なサイトを作ることが簡単にできてしまうのです！


ところでWordPressってなに？

• オープンソースのブログソフトウェア

• CMS（コンテンツマネージメントシステム）としても使える

• GNU General Public Licenseの下で配布されている（改変などしてもOK）

• PHPとMySQLの環境のサーバーで動く

• 複数アカウントを作れるので、複数人で管理・投稿できる


「やっぱりWordPressって難しそう」


「やっぱりWordPressって難しそう」

ちょっと待ってください！！


WordPressからサイトを作るのはどれほど簡単か

実演！


MAMPを使ってローカルにWordPress設置してみる理由

• XAMPPは機能が豊富すぎる（僕の単なる技術不足？）

• XAMPPのMac OS X版の[MAMP]の方が簡単

• MAMPのWindows版もある

• MAMPはシンプルで簡単にローカルにサーバーを設置できる

• 特定のレンタルサーバーの無料期間を使う手もあるが、特定の物をここで使うと宣伝になってしまうので、今回はMAMP


いまいちWordPressがわからない人へ

• 同じくオープンソースのMozilla Firefoxと比較すると、WordPressというものが見えてくる


WordPressのテーマ• WordPressのテーマは、Mozilla Firefoxに例えると、ア

ドオンのテーマ

• 見た目が一新する


WordPressのプラグイン• WordPressのプラグインはMozilla Firefoxに例えると、アド

オンやプラグイン

• 機能を追加できる


PHPとは• Hypertext Preprocessor

• プログラミング言語

• サーバーサイド・スクリプト言語

• 動的にHTMLデータを生成することによって、動的なウェブページを実現する

• Webサーバ上で動作


HTML5とは

• HTMLはHyperText Markup Languageの略

• マークアップ言語

• HTMLの5回目に当たる大幅な改定版

• 2016年9月にHTML 5.1が勧告される予定


CSS3とは

• CSSはCascading Style Sheetsの略

• CSS3はCascading Style Sheets, level 3の略

• HTMLの要素をどのように修飾（表示）するかを指示する


オススメするテーマ• Lightning

• Twenty Sixteen

• Twenty Fifteen

• Twenty Fourteen

• 他ここでは紹介できない無料テーマ（5つ）


オススメするプラグイン• Jetpack(多機能プラグイン）

• Akismet（スパムコメントから守ってくれる）

• BackWPup（バックアッププラグイン）

• Google XML Sitemaps（Googleのためにサイトマップを作成）

• PuSHPress（Googleに早くインデックスされるようになる）

• Speech bubble (ふきだしプラグイン)

• SyntaxHighlighter Evolved（ソースコードを公開しやすくなる）

• Table of Contents Plus（テーブルを簡単に作れるようになる）


WordPressで記事を書く時に覚えておいたほうがいいHTML要素• h2,h3,h4 要素

• p 要素

• ol 要素

• ul 要素

• li 要素


WordPressで記事を書く時に覚えておいたほうがいいHTML要素2

• a 要素

• br 要素

• strong 要素

• table 要素


WordPressで記事を書く時に覚えておいたほうがいいHTML要素2

• a 要素

• br 要素

• strong 要素

• table 要素

実演！


プラグインJetpackが便利• JetpackとはWordPress.comの機能をWordPressに追加する

プラグイン

• 「WordPress.com」のアカウントが必要

• [モニター]でサイトがダウンした時にお知らせ

• [プロテクト]でブルートフォース攻撃防止

• [カスタムCSS]子テーマより気軽にCSSを上書きできる

• [Markdown]Markdown記法で楽に記事を書く


http://wordpress.com

プラグインJetpackが便利• JetpackとはWordPress.comの機能をWordPressに追加する

プラグイン

• 「WordPress.com」のアカウントが必要

• [モニター]でサイトがダウンした時にお知らせ

• [プロテクト]でブルートフォース攻撃防止

• [カスタムCSS]子テーマより気軽にCSSを上書きできる

• [Markdown]Markdown記法で楽に記事を書く

実演！


http://wordpress.com

ここまでのまとめ• 運用には費用はかかるもののここまで自由に簡単にサ

イトを作成できる

• WordPressはPHP、HTML5、CSS3、JavaScriptの技術があれば更に自由に活用できるが、なくてもある程度扱える

• PHPの技術があれば、テーマやプラグインを作ったりカスタマイズしたりすることが可能なので、技術と知識があれば更に使いこなせる


WordPresでのコミュニティサイトの作り方

実はとっても簡単！


コミュニティサイトの作り方• 誰でも会員になれるようにする

• プラグイン BuddyPressをインストール

• BuddyPressの設定をする

• フォーラムも欲しい人は、プラグイン bbPressもインストール

• BuddyPressのデフォルトのテーマに切り替え


コミュニティサイトの作り方• 誰でも会員になれるようにする

• プラグイン BuddyPressをインストール

• BuddyPressの設定をする

• フォーラムも欲しい人は、プラグイン bbPressもインストール

• BuddyPressのデフォルトのテーマに切り替え

実演！


BuddyPressとbbPressを活用してできたサイト

• MJC(名城大学生のアプリ)←MonacaとOnsen UIを活用してもらいスマホアプリ化

• トランペットSNS←MonacaでiPhoneアプリ化

• MentalSNS←Appleの審査突破できず・・・


大学生がWordPressを使用しできたサイトの紹介


ヤウタンタン！(ブログ）

http://yautatp.ddo.jp/


てつぱら！（サイト）

http://www.tetsupara.org/


CUMAC!(同好会のサイト）

http://cumac.nagoya/


ryo.nagoya（ブログ）

http://ryo.nagoya/


まとめ• WordPressは一見難しそうで、入り口は簡単

• PHPの技術を身につければ、更に使いこなせる

• HTML5をちょっと知ってる程度で記事を書ける

• コミュニティサイトを作るのも簡単

• 大学生にこそWordPressが普及して欲しい


参考にしたサイト• WordPress - Wikipedia (https://ja.wikipedia.org/wiki/WordPress)

• PHP: Hypertext Preprocessor - Wikipedia (https://ja.wikipedia.org/wiki/PHP:_Hypertext_Preprocessor)

• HyperText Markup Language - Wikipedia (https://ja.wikipedia.org/wiki/HyperText_Markup_Language)

• HTML5リファレンス (http://www.htmq.com/html5/)

• CSS - Wikipedia (https://ja.wikipedia.org/wiki/CSS)

• Markdown quick reference — Support — WordPress.com (https://en.support.wordpress.com/markdown-quick-reference/)

• BuddyPress.org (https://buddypress.org/)

• bbPress.org (https://bbpress.org/)

• WordPress Codex 日本語版 (https://wpdocs.osdn.jp/Main_Page)←大変参考になるサイト


https://ja.wikipedia.org/wiki/WordPress

https://ja.wikipedia.org/wiki/PHP:_Hypertext_Preprocessor

https://ja.wikipedia.org/wiki/HyperText_Markup_Language

http://www.htmq.com/html5/

https://ja.wikipedia.org/wiki/CSS

https://en.support.wordpress.com/markdown-quick-reference/

https://buddypress.org/

https://bbpress.org/

https://wpdocs.osdn.jp/Main_Page

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


Internet

[修正版]大学生によるWordPress活用事例紹介 -1-大学生にこそ普及してほしいWordPress