ON/OFFボタン

onoff_capt

■動作デモ
http://dev.koekatamarin.com/zokei/onoff/

■概要
jQueryの簡単なサンプルです。

■このサンプルで使っているjQueryの機能
・toggleClass() によるクラスの切り替え

■ポイント
動的にページの見た目を変更するには、jQueryでCSSクラスを切り替る方法があります。
変化前と変化後のCSSクラスをあらかじめ定義しておいて、jQueryでHTMLタグの class=”” の中身を書き換えると、クラスが変わって、スタイルも変わります。

■コード

HTML側(index.html)

JavaScript側(script.js)

CSS側(style.css)

サウンド再生

■動作デモ
http://dev.koekatamarin.com/zokei/soundSimple/

■概要
JavaScriptによる音声再生。
jQueryはほとんど使いません。

■このサンプルで使っているJavaScriptの機能
・new Audio() によるHTML5 Audioオブジェクトの使用

■ポイント
AudioクラスはHTML5の仕様で定められていますが、再生できるメディアの種類がブラウザによって異なるのが現状です。
音声メディアの場合、FirefoxはOGGファイル、それ以外はMP3に対応しています。
このため、ユーザーのブラウザを判別して、拡張子を切り替える処理を冒頭に入れています。

addEventListner() による「イベントリスナー」という考え方が出てきます。「イベント」が発生したら、なにか処理を行う、という考え方です。(マウスクリックなども、イベント処理のひとつです。)

■コード

HTML側(index.html)

 

JavaScript側(script.js)

■ウィジェットの意義

ウィジェットとは、WordPressサイト上に何らかの表示をするためのパッケージです。
テーマファイルに直接 表示したいものを書き加えてもよいのですが、ウィジェット化すると複数のWPサイトで簡単に使いまわせます。
もちろん、ウィジェットを配布して、多くのWPサイト制作者に便利な機能を提供することもできます。

ウィジェットにすると効果的なのは、バナー広告や、運営サイト一覧、ブログパーツなどです。複数のWordPressサイトに毎回テーマに書き加えているものがあれば、それはウィジェット化すればあとあと楽です。

ウィジェットが作れるようになったら、プラグインも同じ感覚で作ることができます。

 

■ サンプルウィジェットのインストール

コエカタマリンシナジー・ウィジェット

http://dl.koekatamarin.com/koekatamarin-synergy-widget.lzh

講師が自分用に作成。自分の運営サイト群の一覧を表示する、相互リンクのための便利ウィジェット

ダウンロードしたら、解凍してできたフォルダを

/wp-content/plugins/

に設置。

自分のWP管理画面の「プラグイン」にアクセスすると、プラグインが増えています。

Koekatamarin Synergy – ALL

これを「有効化」。

次にWP管理画面の「外観 > ウィジェット」にアクセスすると、ウィジェットが増えています。

これをサイドバーにドラッグアンドドロップします。

これで実際の公開サイトに表示されているはずです。

公開サイトを確認してみましょう。

 

 

■ このウィジェットの実際のコード

このウィジェットはすごくシンプルで、ほとんどウィジェットを作るための約束事だけしか書かれていません。

このウィジェット独自の処理は、わずかに

の一行だけです。
これは、外部のサーバー(講師の会社の公式サイト)から、運営サイト一覧表示のためのHTMLタグを読み込んできて、表示する処理です。

 

この部分を、例えば

と書けば、現在日時を表示するウィジェットになります。

 

次の例では、サッカーW杯ブラジル大会開催までの日数を表示するウィジェットが作れます。

 

以上がウィジェット作成の概要になります。
より詳細に知りたい人は、ネットで情報を探してみてください。

3ステップでつくるWordPressサイドバーウィジェット | firegoby
http://firegoby.jp/archives/2303

WordPressのウィジェットを自作するためのTips
http://kachibito.net/wordpress/custom/how-to-add-your-widget.html

 

Have fun!(^ω^)

■アイデア(1)デザインを変更したい
→HTML、CSSを変更すれば良い

管理画面の「テーマ編集」から行う

ローカルにもWordPressを立ちあげて、そこでテーマを作っていくようにすれば、ファイルをそのまま編集できます。(テーマ完成後、サーバー上のWPにフォルダごとアップ)

→Mac用のFetchやCyberduckでは、FTP越しに直接編集が可能なので便利!

↑ Web開発者にMacが選ばれる理由のひとつ

【余談】わかる人向けの話

業務レベルでは、サーバー上のファイルをどう扱うか?

(1)ターミナルからssh接続でサーバーにログインして、viやemacsで直接編集

(2)バージョン管理ツールでチェックアウトしたファイルをローカル編集したあとコミット

 

■アイデア(2)テーマで使う画像を変更したい

テーマフォルダ

/wp-content/themes/テーマ名/

のなかの、画像を格納するフォルダ(imgとかimagesとか)に、新しい画像をFTPアップロードすればよいです。

もちろん、テーマフォルダ内に新しい画像フォルダを作ってしまってもいいです。

 

■アイデア(3)日付の記法を修正する

・時間まで表示したい
・海外のテーマを使ったら、年月日の順序がおかしい(日・月・年だったりする)

テンプレートタグの使い方はリファレンスを見ましょう。
http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0

 

※取得タグと表示タグのちがいに注意

例)

the_author()・・・記事の著者名を表示

get_the_author()・・・記事の著者名を取得

これらは、使い方が違います。

get_ のほうは、変数のように扱えるので、計算してから表示したり、条件分岐に使ったりできます。

 

■アイデア(4)コメント欄を消してしまいたい

記事詳細ページにはコメント投稿フォームが表示されます。

管理画面の設定で、新しい記事を追加した時にコメントを許可しないように設定しておくことができます。ですが、これだとコメント欄自体は残ってしまいます。

”この記事へのコメントは締め切られました”

サイト全体を通じてまったくコメント機能が必要でない場合は、テーマファイルからコメント関連の記述を全部削除してしまいましょう。

 

 

■アイデア(5)スライドショー

スライドショーを設置したいというのはよくあるケースだと思います。

例)講師の運営サイト  http://kiduki-journal.org/

このような場合、考え方はだいたい3つあります。

  1. スライドショー機能のあるテーマを選択する
  2. スライドショー機能のプラグインを導入する
  3. テーマに、自分でjQueryスライドショーなどを導入する(記事と連動しないスライドショーを作りたいという稀なケース)

テーマの編集

ここで説明: http://tokyozokei.sakura.ne.jp/2014/_irie/wp/

→テーマ「Sepfyre」を選択した場合
→記事のアイキャッチ画像として設定された画像がスライドショーに出る

 

 

■アイデア(6)固定ページのデザインを変更する

  1. すべての固定ページのデザインを変更するには、テンプレートフォルダの中の「page.php」を変更します。
  2. 固定ページそれぞれでデザインを分けるには、固定ページの「スラッグ」に対応したpageファイルを作成します。(page-XXXX.php)

スクリーンショット 2015-07-16 21.38.28「companydata」というのがスラッグ。ページごとのアドレスの識別子。

スクリーンショット 2015-07-16 21.36.34スラッグごとに、page-XXXX.phpが沢山作られています。

実際のWordPressサイトの画面で説明
https://www.glasel.jp/

 

 

■アイデア(7)「投稿」「固定ページ」以外のコンテンツを追加できるようにしたい

「カスタム投稿タイプ」という機能を使います。
WordPress標準の機能なのですが、通常は、これをうまく管理するためのプラグインと一緒に使います。

実際のWordPressサイトの画面で説明
カスタム投稿タイプの例  http://edventure.jp/
カテゴリーだけの例  https://www.glasel.jp/

 

 

■アイデア(8)投稿記事ごとに、特殊な値(変数)を持たせてやりたい

答え →「カスタムフィールド」を使います。

WordPressの基本として、投稿記事それぞれに、「タイトル」「本文」「日付」「カテゴリ」「タグ」「執筆者」などの情報が紐付いて登録・管理されています。

これにより、Aというある記事を表示するページでは、Aのタイトル、Aの本文….などが適切に表示されます。

いっぽう、記事のタイトルや本文といった基本的な付加情報以外にも、何らかの特殊な値を持たせたいというときがあります。

たとえば、本のレビューサイトで、
記事ページのタイトルの下に、書名、出版社、レビュー点数などを、毎回きまったレイアウトで表示したい場合などです。

このような場合の制作方法は、まず、テンプレートファイルにレイアウトを作成した上で、記事ごとに書き換わる部分(書名、出版社、レビュー点数など)を独自の「変数」にして、記事投稿ページでその変数を埋めてやる、という風に考えます。

この「変数」というのが、「カスタムフィールド」です。
「カスタムフィールド」はWordPressの標準機能です。

実際のWordPressサイトの画面で説明
https://www.glasel.jp/

 

 

■アイデア(9)記事の一覧を表示したい

→別ページでご説明します。
http://zokei.koekatamarin.com/archives/900

 

基礎知識はざっとこんなもんです。

あとは、みなさん自信が自由に、変えたいように変えていけるはずです。

 

Have fun!(^ω^)

■ メモ帳は使わない

開発作業・制作作業には、Windows標準の「メモ帳」は使ってはいけません。

WordPressのインストール作業でも設定ファイルを編集する場面があります。

文字コード、改行コードを自由に変更できるエディタであるべき。

  • IDE:Aptana、Eclipseなど
  • Win:秀丸エディタなど
  • Mac:Smultron、Fraiseなど

 

 

■WPについての調べ方

PHPの関数とは別に、WordPress独自の関数があります。

WordPressの関数のなかでも、テンプレートの中だけで使うものを「テンプレートタグ」と呼びます。

これらの関数はたくさんあるので、意地でもすべて覚えるというよりは、適宜リファレンスから探して使えばよいでしょう。

日本語訳されていないところも本家には書かれているので、なるべく英語版を見るようにがんばろう!

 

最新情報をウォッチするには、TwitterやFacebookで技術者をフォローする、RSSリーダーを使うなど。

はてブ タグ検索
http://b.hatena.ne.jp/search/tag?q=wordpress
http://b.hatena.ne.jp/search/tag?q=wp

 

■ サーバーの選び方

  • PHPが使える(なるべくPHP5)
  • MYSQLが使える(なるべくMYSQL5以上)

WordPress3.2から:PHP5 + MYSQL5以上
WordPress3.1まで:PHP4 + MYSQL4

レンタルサーバーを借りる前に、「サーバー会社名 WordPress」などで検索すれば、WordPressサイトを構築・運用している人がいるかどうかはすぐわかります。

汎用のレンタルサーバー以外にも、WordPress専用のマネージドサーバーもあります。

 

Have fun!(^ω^)

わかりやすく簡潔に説明しているため、真に正確とは言えない表現が含まれています。より深く正確な知識を得るには、ご自分で調査してください。

ブログとは?
Weblogのこと。 もともとは「日記システム」として作られた。 記事をストック(投稿)して、それを表示する(一覧と詳細)。 2000年代中盤にブログブーム。 以降、高機能化が進み、CMSの一種という位置づけになる。

CMSとは?
コンテンツ管理システム(Contents Management System)のこと。
静的なHTMLデータで(1対1で)ページを表示するのではなく、テンプレートを用いて動的にページを表示する。
つまり、ページが、コンテンツ(データ)とテンプレート(デザイン・レイアウト)に分離した状態で存在するよう設計されている。
これにより、専門知識のない人でもコンテンツメイク・ページ作成できる。
一般的な無料ブログサイトのようなものは、CMSのもっともシンプルな使い方。
多数のページを持つコーポレートサイトの場合は、より高度なCMSの使い方。

CMSの種類

ブログ向きとされるCMS
WordPress – 主流。PHP
MovableType(MTOS) – 次点。Perl + PHP
NucleusCMS – 一昔前。PHP
ExpressionEngine – Gigazineで使われている
など

企業サイト構築にも耐えるブログCMS
WordPress
MovableType(MTOS)

大規模サイト制作のための汎用CMS
Joomla!
Drupal – Yahoo!で使われている
Concrete5
TYPO3
XOOPS – 一昔前。PHP

その他
Mediawiki – Wikipediaのシステム。PHP
EC CUBE – ショッピングサイト用。PHP
島根県CMS – 行政機関向け。Ruby
などなど…

ブログと企業サイト
一言で言うと、ブログサイトと企業サイトは複雑さが異なる。
ブログサイトは、記事の単純な「一覧-詳細」の関係が基本で、その他にカテゴリー機能、月別一覧などが存在するにすぎない。
企業サイトはコンテンツの種類ごとにレイアウトが異なり、コンテンツの中に他のコンテンツ一覧が入ったり、コンテンツが階層関係にあったりする。他にもブログにはない様々な機能がある。
どちらも基本はコンテンツの「一覧-詳細」だが、複雑さにおいて異なり、システムに求められる柔軟さが異なる。
WordPressで企業サイトを作るには「柔軟なシステム」にしなければならない。それを実現するのがプラグインである。
プラグインで様々な機能を加える事で、汎用CMSに匹敵する複雑なサイトを表現できる。

Webフレームワークとは?

この文章を書こうとした人は途中で寝てしまいました。

「定番」と言っても、時々刻々と「定番」は変化していて、本当に「定番」といえるものをWPサイト制作者全員が認識共有しているわけでもないです。

言ってみれば、WordPressサイト制作者にとっては、こういったノウハウこそが「飯のタネ」だったりもするわけです。

なので、常日頃から自分自身で情報収集していかなければなりません。

プログラマーもデザイナーも、情報収集できないとダメです。

 

 

以下のリストは、講師がここ数年WP界隈をウォッチしてきた中で、現時点でのベストと考えているセレクトです。

まず最初に自分のWPサイトを構築する際に、プラグイン検索画面でかたっぱしから検索してインストールしてみてください。

インストールが終わったら、WPサイト高速構築のためのプラグイン管理テクニックで説明しているように、ローカルコンピューターにも丸ごと保存しておきましょう。

 

 

初期プラグイン

Akismet

コメントスパム・トラックバックスパムを防止。必須!

HelloDolly

サンプルプラグイン。不要。

WP Multibyte Patch

WPの日本語周りの機能を修正する。必須!

 

 

よく使われているプラグイン

 

Advanced-Make-Clickable
本文中のURLを自動でリンクにする

 

Breadcrumb NavXT
パンくずリストを表示

 

Broken Link Checker
リンクエラーを検出してメールで教えてくれる

 

Contact Form 7
問い合わせメールフォームを簡単作成

 

Crayon Syntax Highlighter
プログラムコードをキレイに表示

 

CSV Importer
CSVファイルから記事一括インポート

 

Custom Field Gui Utility
カスタムフィールドをいじくる

 

Custom Post Type UI
カスタム投稿タイプを作成できる

 

Exec-PHP
記事やテキストウィジェットでPHPコードを使える

 

EZ zenback
Zenbackサービスを簡単に導入

 

Facebook
Facebook公式プラグイン

 

FeedLogger
RSSフィードの購読者を記録

 

Google XML Sitemaps
Google用のsitemap.xmlを自動作成

 

Ktai Style
携帯電話用のHTMLを自動作成

 

PhotoDropper
CCの写真を簡単に記事に貼れる

 

PS Auto Sitemap
サイトマップページを自動生成

 

PubSubHubbub
更新Pingを自動配信

 

qTranslate
多言語サイト作成

 

WordPress Database Backup
データベースを定期バックアップ

 

WP Social Bookmarking Light
ソーシャル関連のボタンを配置

 

WPtouch
スマホ用のHTMLを自動作成

 

Yet Another Related Posts Plugin
関連記事を表示する

 

 

人によってどれを使うか分かれるけど定番
SEO対策プラグイン

All In One SEO Pack
WordPress SEO

Twitter関連

WordTwit
Tweetable

Google Adsense(広告)

Quick Adsense
Floating Adsense Bar
Master Post Advert
など

Google Analytics(アクセス解析)

Google Analytics Dashboard
Google Analytics for WordPress

※「WordPress SEO」でも設定できる

JS/CSSファイルを圧縮してサイト高速表示
Script Compressor
WP Super Cache

など

 

 

 

 

 

更新について

まず、WordPress本体も、テーマも、プラグインも、「更新」があります。

更新がリリースされたら、管理画面の左サイドバーの「ダッシュボード>更新」と「プラグイン」のところに数字が表示されます。この数が、更新数の合計です。

kousin

基本的には、管理画面にちょくちょくアクセスして、定期的に更新するようにします。

注意すべき点として、更新したプラグインなどにバグがあった場合、サイトがうまく動かなくなったりすることがあります。お客さんに納品したWPサイトなどでは、更新を全く行わないというのもひとつの方法です。

ただしWordPress本体の更新リリースには、セキュリティ問題の修正が含まれていたりします。なので、原則として本体の更新は必須です。本体を更新すると、古いプラグインが動かなくなることも稀にあるので、その時プラグインも一緒に更新します。

 

WordPressサイトをたくさんつくっていく

「更新」の話しとは別に、複数のWordPressサイトを制作・運営していくときのノウハウについて触れたいと思います。

現在、何かWebサイトを立ち上げる場合、WordPressが選ばれることがかなり多いです。

現時点でもっともたくさん作られているのは、Tumblrサイトだそうです。WordPressサイトは、それに次いでたくさん作られています。

 

ブログだけでなく、企業サイト、キャンペーンサイト、非営利団体サイト、行政の公的なサイトも、WordPressで作られるものがほんとうに多いです。

このことはみなさんも例外ではありません。

今後みなさんが作っていくサイトも、かなりの割合でWordPressサイトであると言って間違いありません。

WordPress以外のCMSやフレームワークを使う場合も含めると、静的なHTMLをゼロから作って、サーバーにアップして…という機会は、実はほとんどないと言ってもいいです。

 

 

プラグインまわりの作業に時間がかかる

つまり、みなさんはこれからサイトを作るたびにほぼ毎回

  1. データベースを作って、
  2. WPをアップしてインストールして、
  3. プラグインを設定して…

ということをやらなければなりません。

1と2は、省くことのできない必須のステップです。

そして、素直にやると一番時間がかかるのが3です。この作業は効率化することができます。

 

プラグインを一つ一つダウンロードして、有効化して、設定して…というのは結構時間がかかります。

ひとつのWordPressサイトに使われるプラグインの数は、通常10を超えます。場合によっては数十個にもなるでしょう。

また講師の場合は、WordPressを使う率は低いほうなのですが、それでも30サイトぐらいは運用しています。これからも増えていきます。

 

プラグイン管理テクニック

WordPressサイト構築時のプラグイン関連作業を手早く済ませるため、自分がWPサイト構築に使うプラグインを、すべて手元のコンピューターにバックアップしておきます。

いわゆる「自分の定番プラグイン」フォルダを持つようにするのです。

サーバーのWPインストールフォルダから、 /wp-content/plugins/ を開くと、WPにインストールされたプラグインの実ファイルがすべて格納されています。

これを自分のコンピュータにすべて保存しておきます。

次にWPサイトを新しく構築するときは、プラグインをひとつひとつダウンロード・インストールしないで、同じく /wp-content/plugins/ のフォルダに、手元のプラグインファイルを丸ごとアップロードします。

plugin

1. WordPressをダウンロードする

http://ja.wordpress.org/

 

2. zipを解凍する

 

3. WordPress設定ファイルの編集

ローカルの「wordpress」フォルダを開きます。

wp-config-sample.phpのファイル名を、wp-config.phpに変更します。(-sampleをとる)

このファイルはテキストファイルなのですが、「メモ帳」で開いてはダメです。

Windowsでは「秀丸エディタ」Macでは「Fraise」のようなちゃんとしたエディタで開かないと、文字コードが壊れます。

この授業ではAptanaを使いましょう。Aptanaの、「ファイル」→「ファイルを開く」

ファイルが開いたら、下記のように変更して保存します。

 
! データベース名のところの数字6ケタは学籍番号
! パスワードは、FTPのときと同じ。

 

4. アップロード

サーバーの「wp」フォルダを開いておきます。

ローカルの「wordpress」フォルダを開いて、すべてのファイルを選択します。

選択したローカルファイルを、サーバーの「wp」フォルダの中にドラッグアンドドロップします。

 正確には、

license.txt
readme-ja.html
readme.html

の3ファイルは不要です。

 

5. ブラウザで開く

アップロードがすべて完了したら、

http://tokyozokei.sakura.ne.jp/学籍番号/wp/

にアクセスします。(学籍番号のところは数字6桁に直してね)

 

6. インストール画面(ようこそ)

WPinstall

サイトのタイトル:(自由に)

ユーザー名:(自由に)※「admin」は不正アクセスされやすいのでダメ!

パスワード:(自由に)※忘れないようにメモ!

メールアドレス:授業では学校のメールアドレス

 

7. インストール完了を確認

8. メールを確認

9. ログインする

10. ダッシュボードが開いたらすべて完了!

WPinstall

 

これでWordPressのインストール方法は覚えられましたね!?
おめでとう!(^ω^)

 

 

サーバーとのファイル通信

サーバーにファイルをアップロードする通信方法は、

  • FTP
  • SFTP
  • SCP(SSH)
  • WebDAV

などがあります。

一般に、フリーのFTPソフト(FTPクライアント)を使います。

 

フリーのFTPソフト

Windows

定番「FFFTP」  http://sourceforge.jp/projects/ffftp/

SCPなども行うなら「WinSCP」  http://winscp.net/eng/docs/lang:jp

Mac OSX

高機能だがちょい遅「Cyberduck」 http://cyberduck.ch/

定番「Fecth」シェアウェアだが…  http://fetchsoftworks.com/

 

 

授業用の設定

(1)Windows / FFFTPの場合

1. 自分の学籍アカウントでログインし直す

2. zipをダウンロード  http://sourceforge.jp/projects/ffftp/

自分のPCなら:ffftp-1.98g.exe (日付: 2013-02-25, サイズ: 2.2 MB)
学校のPCなら:ffftp-1.98g.zip (日付: 2013-02-25, サイズ: 1.8 MB)
※ 学校の管理者権限トラブルを避けるため。本当はexeインストーラが早くて便利。

3. zipを解凍して、FFFTP起動

学校のPCにzipを落とした人は、とりあえず「ffftp」フォルダをデスクトップに移動させましょう。ffftpフォルダの中のFFFTP(.exe)を起動。

4.ホスト一覧→新規ホスト

入力する内容自体は前回と同じ。パスワードも。

数字6桁のところは学籍番号!

ffftp

 

入力できたらOKを押す。

 

5. 接続

接続ボタンを押す。

「証明書を信頼しますか」と聞かれたら「はい」を押す。

「暗号化の状態を保存しますか」と聞かれたら「はい」を押す。

6. 接続完了

フォルダが2つあります。

  • geo
  • wp

 

 

 

(2)Mac / Cyberduckの場合

1. ダウンロード&インストール

http://cyberduck.ch/

2. ブックマークを追加

cyberduck

 

3. 接続

ブックマークの「tokyozokei.sakura.ne.jp」をダブルクリック

パスワードを聞かれたら入力

キーチェーンアクセスへの許可を聞かれたら「OK」

6. 接続完了

フォルダが2つあります。

  • geo
  • wp