WordPressの活用
CMSによるWebサイトの構築と運営｜約３時間
はじめに
この実技講習では、皆様のお仕事の現場における情報の発信、また関係者間の情報共有について、WordPressというCMSを使いながら体験します。時間終了までに、以下の２項目を完成させることを目標とします。
- １） 「記事」を投稿する
- 内容は、文化祭、体育祭などの学校行事の案内（架空のもので可）。
- 行事名、日時、場所などに、簡単な説明文を加えて構成します。
- 「カテゴリー」と「タグ」も指定します。
- ２） 「固定ページ」を作成してメニューに登録する
- 授業のページ、〇〇委員会のページ、○○部のページなど、テーマは自由。
- 見出し、本文（簡単な説明）と写真で構成します。
WordPressとは
Webサイト構築における事実上の標準、今最も注目度の高いCMSです。
以下の２種類の公式サイトがあります。
- http://ja.wordpress.com/
ブログサービスを利用するならこちら - http://ja.wordpress.org/
自前のサーバーを用意してパッケージをインストールするならこちら
特徴
- ライセンスGPLのオープンソース。無料で入手（活用）できます。
- Webに関する専門的な知識がなくても、すぐに活用できます。
- 技術を段階的に身につけていけば、最終的には
すべてを自分の手でカスタマイズすることができます。
WordPressの導入
TYPE1 : wordpress.com の利用
本講習では、こちらをメインに使います。
- WordPress.com でアカウントを作成
必要なのはメールアドレスだけです。開設には5分もかかりません。 - 参考：WordPress.comの登録手順
TYPE2 : WordPressのパッケージをインストール
本講習では、体験的に利用します。
http://opensquarejp.hotcom-web.com/wordpress/
WordPressは、一般的なHTMLサイトとは違って、サーバー側で「記事」を処理するプログラムの集合体なので、まずそのパッケージを入手して、サーバーにセットアップする…という作業が必要になります。
- レンタルサーバーは、以下の条件を満たす必要があります。
- 以下、無料のレンタルサーバーでその条件を満たす例です。
WordPressのインストールが標準でサポートされているので、手動でセットアップする手間が省けて、簡単です。
WordPressを使う｜基礎編
以下、WordPressの基本的な使い方を概説します。
サイトの管理
サイトの管理は「ダッシュボード」から行います。
- ダッシュボードにログインするには、
- ページ内に「ログイン」の表示がある場合はそれをクリック。
- あるいは、以下のように直接PHPファイルにアクセスします。
http://（WordPressサイトのURL）/wp-admin/
- ダッシュボード内には、以下のようなメニューがあります。
- 投稿（記事の投稿管理です）
- メディア（画像などのメディアファイルを一括管理します）
- 固定ページ（投稿とは異なるスタティックなページが作れます）
- 外観の設定（テーマ、メニュー、ウィジェット）
- プラグイン（プラグインの追加で機能の拡張ができます）
- ユーザー（一つのサイトを複数のユーザで編集できます）
- ツール（エクスポート、インポート）
- 設定（タイトル、キャッチフレーズ、フロントページの設定など）
外観の設定
まず、基本的な外観の変更を試してみましょう。
- テーマの変更
サイトの外観はページの雛形となるHTML構造とCSSによって決まります。
これをセットで扱っているのが「テーマ」で、その変更は非常に簡単。- 外観＞テーマの変更＞１つ選んで「有効化」
- 有料のものと無料のものがあります。上のメニューで「無料」を選べば無料の候補が並びます。
- WPにはデフォルトテンプレートがあります。
例えば2011年の標準テンプレートには、Twenty Eleven など、西暦を英語読みした名称がつけられています。
- ヘッダー画像の変更
- 外観＞ヘッダー＞・・・
- サイト名（タイトル）とキャッチフレーズ（サブタイトル）
- 設定＞一般設定＞ でこれらを変更することができます。
- フロントページの設定
サイトのトップには、「最新の投稿」あるいは「固定ページ」を利用することができます。前者はBlog、後者は一般サイトのイメージになります。- 設定＞表示設定＞フロントページの表示 で変更できます。
- 外観＞カスタマイズ＞フロントページの表示 でも同様。
記事の投稿
本来のブログ記事を書いて公開する場合は、「記事の投稿」から
- 投稿＞新規＞タイトルと本文を書いて＞公開
- ダッシュボード右上の「表示オプション」で「ディスカッション」にチェックをいれるとコメントを受けるか否かなどの設定が可能です。
- 記事の削除は、投稿＞投稿一覧＞不要な記事を選択＞操作ー削除
エディタの使い方
投稿、固定ページのエディタは「ビジュアルエディタ」と「テキストエディタ」があって、右上にあるタブで切り替えることが出来ます。
- ビジュアルエディタ:実際の表示を確認しつつ入力
- テキストエディタ:HTMLタグを記述する（埋め込みコードも可）
記事の入力においては、以下の動作に留意して下さい。
- [ENTER] 段落<p>を新規につくるので、行間が大きく開きます。
- [SHIFT]+[ENTER] 通常の改行です。
固定ページを作る
常設的に公開する情報は「固定ページ」を使って掲載します。
固定ページを「メインメニュー」に登録することで、
一般のWebサイトと同様のイメージにすることができます。
- 固定ページ＞新規＞タイトルと本文を書いて＞更新
メニューを構成する
固定ページをメニューバーに並べることで、一般的なサイトと同様のナビゲーション環境を構築することができます。
メニューのカスタマイズには、「メニューの編集」と「位置の管理」の２つの設定作業が必要です。
- メニューの編集
- 外観＞メニュー＞固定ページやリンクをメニュー構造へドラッグ
メニューに登録できるのは、固定ページ、リンク、カテゴリーの３種類 - メニュー表記などを編集して＞メニューの保存
- ラベル（実際に表示される文字列）は後から自由に変更できます
- 外観＞メニュー＞固定ページやリンクをメニュー構造へドラッグ
- 位置の管理
メインメニュー以外にも複数のメニューを追加することができる設定になっています。したがって、テーマ（外観）上のどの位置に、どのメニューを表示するかを明示的に指定することが必要です。
WordPressを使う｜応用編
メディアの管理
WordPressでは画像や動画・音楽などをメディアと呼びます。
投稿や固定ページの作成中にアップする、
あるいは事前にアップしておくことも可能です。
- メディアをアップロードするには
ダッシュボード＞「メディア」＞「新規追加」＞画像をドラッグ＆ドロップ - メディアの編集 メディア＞ライブラリ＞当該メディアの「編集」
- メディアの削除 メディア＞ライブラリ＞当該メディアの「完全に削除」
- サンプル画像にはPublicDomainのものを用いて下さい。
http://commons.wikimedia.org/wiki/Main_Page
ギャラリー機能の活用
ページ内にイメージギャラリーを設置したい場合＞以下の手順です。
- ページ内（固定、投稿）の希望の箇所で、「メディアの追加」をクリック
- メディアの追加ウィンドウで「ギャラリーの作成」をクリック
- ギャラリーに表示したい画像を選択して、「ギャラリーの作成」
- 候補だけが再表示されるので、順番等を入れ替え
- 「ギャラリーの挿入」をクリックすると、以下のようなショートコードがページ内に挿入されます。以上で完了。
[gallery ids="96,95,104"]
尚、サムネイルサイズは、ダッシュボード＞設定＞メディア設定 で変更することができます。「サムネイルを実寸法にトリミングする 」にチェックすると、画像の縦横比に合わせて縮小されることはなくなります。
ウィジェット
WordPressには、ウィジェット（ブログパーツ）が多数用意されています。
- ウィジェットが表示できる場所は
メインサイドバー、フッターエリア、ショーケースエリアなど - ウィジェットの種類
- カスタムメニュー（メニューを複数持たせることができます）
- カテゴリー、タグクラウド（投稿記事を分類・検索表示できます）
- テキスト（自由なテキスト、HTMLの埋め込みコードも使えます）
- メタ情報（ログインボタン等が表示されます）
- その他、カレンダー、アーカイブなど多数あります。
テーマによっては、複数のページテンプレートを持っている場合があります。
サイドバーが表示されるタイプのテンプレートを使用して下さい。
カテゴリーとタグ
WordPressでは、投稿記事（情報要素）にカテゴリーとタグを付けることができるようになっていて、カテゴリーはメニュー項目として、タグは、タグクラウドなどを用いることで、記事の抽出に役立てることができます。
- Category：
- 一定の観点から一挙に仕分けられるもので、階層構造を持つ
- 要素の集合を分類する観点（視点）は無限にある*1
- 観点（視点）を定めて要素を分類する際においては、
- ひとつの要素が２つ以上のカテゴリーに重複して存在することはない
- TAG：
- 要素に関連する「目印」で、系統的に整理されるものではない
- タグは、分類上の「観点」とは無関係に存在する
- ひとつの要素には複数のタグをつけることができる
プラグインについて
WordPressには、SEO対策、表示機能追加など、
様々な「プラグイン」を追加導入することができます。
以下、いくつかの事例を紹介します。
- Count per Day
ダッシュボード内でサイトの統計情報（アクセス状況）が確認できます。
- contact form 7
問い合わせフォーム等を簡単にページ内に設置できるプラグインです。