実技講習|WordPress
をテンプレートにして作成
LECTURE
担当科目一覧
コンピュータ概論/2024
データサイエンス/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*WordPressの活用
CMSによるWebサイトの構築と運営|約3時間
~
//**受講者の方へ
//&color(red){講習お疲れ様でした。成果物(サイト)の確認...
//-Webサイトは、アップしてすぐに検索でヒットするものでは...
//-今は不要…ということで、作成したサイトを削除するには・...
//--ダッシュボードにログインします
//--左のメニュー > ツール > サイトの削除
//※サイトの削除後は、念のため当該URLにアクセスして、サイ...
//~
//#hr
#contents2_1
~
**はじめに
この実技講習では、皆様のお仕事の現場における情報の発信、...
-1) 「記事」を投稿する
--内容は、文化祭、体育祭などの学校行事の案内(架空のもの...
--行事名、日時、場所などに、簡単な説明文を加えて構成しま...
--「カテゴリー」と「タグ」も指定します。
-2) 「固定ページ」を作成してメニューに登録する
--授業のページ、〇〇委員会のページ、○○部のページなど、テ...
--見出し、本文(簡単な説明)と写真で構成します。
~
~
**WordPressとは
Webサイト構築における事実上の標準、今最も注目度の高い[[CM...
-[[GoogleTrends: WordPress, Drupal, Joomla, Movable Type,...
~
***以下の2種類の公式サイトがあります。
-http://ja.wordpress.com/
ブログサービスを利用するならこちら
-http://ja.wordpress.org/
自前のサーバーを用意してパッケージをインストールするなら...
~
***特徴
-ライセンスGPLのオープンソース。無料で入手(活用)できま...
-Webに関する専門的な知識がなくても、すぐに活用できます。
-技術を段階的に身につけていけば、最終的には
すべてを自分の手でカスタマイズすることができます。
~
~
**WordPressの導入
***TYPE1 : wordpress.com の利用
&color(red){本講習では、こちらをメインに使います。};
-[[WordPress.com でアカウントを作成>http://ja.wordpress.c...
必要なのはメールアドレスだけです。開設には5分もかかりませ...
-参考:[[WordPress.comの登録手順>WordPress/Account]]
//http://www.8seminar.com/wp_all/wordpresscom_entry/
~
***TYPE2 : WordPressのパッケージをインストール
&color(red){本講習では、体験的に利用します。};
//ログインは以下から
http://opensquarejp.hotcom-web.com/wordpress/
WordPressは、一般的なHTMLサイトとは違って、サーバー側で「...
-レンタルサーバーは、以下の条件を満たす必要があります。
--[[PHP]](HyperText PreProcessor)が使えるサーバーである...
--データベース[[MySQL>Google:MySQL]]が使えるサーバーであ...
-以下、無料のレンタルサーバーでその条件を満たす例です。
WordPressのインストールが標準でサポートされているので、手...
--[[WPblog>http://www.wpblog.jp/]]
~
~
~
**WordPressを使う|基礎編
以下、WordPressの基本的な使い方を概説します。
~
***サイトの管理
サイトの管理は「ダッシュボード」から行います。
-ダッシュボードにログインするには、
--ページ内に「ログイン」の表示がある場合はそれをクリック。
--あるいは、以下のように直接PHPファイルにアクセスします。
http://(WordPressサイトのURL)/wp-admin/
-ダッシュボード内には、以下のようなメニューがあります。
--投稿(記事の投稿管理です)
--メディア(画像などのメディアファイルを一括管理します)
--固定ページ(投稿とは異なるスタティックなページが作れま...
--外観の設定(テーマ、メニュー、ウィジェット)
--プラグイン(プラグインの追加で機能の拡張ができます)
--ユーザー(一つのサイトを複数のユーザで編集できます)
--ツール(エクスポート、インポート)
--設定(タイトル、キャッチフレーズ、フロントページの設定...
~
***外観の設定
まず、基本的な外観の変更を試してみましょう。
-テーマの変更
サイトの外観はページの雛形となるHTML構造とCSSによって決ま...
これをセットで扱っているのが「テーマ」で、その変更は非常...
--外観>テーマの変更>1つ選んで「有効化」
--有料のものと無料のものがあります。上のメニューで「無料...
--WPにはデフォルトテンプレートがあります。
例えば2011年の標準テンプレートには、Twenty Eleven など、...
-ヘッダー画像の変更
--外観>ヘッダー>・・・
-サイト名(タイトル)とキャッチフレーズ(サブタイトル)
--設定>一般設定> でこれらを変更することができます。
-フロントページの設定
サイトのトップには、「最新の投稿」あるいは「固定ページ」...
--設定>表示設定>フロントページの表示 で変更できます。
--外観>カスタマイズ>フロントページの表示 でも同様。
~
***記事の投稿
本来のブログ記事を書いて公開する場合は、「記事の投稿」か...
-投稿>新規>タイトルと本文を書いて>公開
-ダッシュボード右上の「表示オプション」で「ディスカッショ...
-記事の削除は、投稿>投稿一覧>不要な記事を選択>操作ー削除
''エディタの使い方''
投稿、固定ページのエディタは「ビジュアルエディタ」と「テ...
-ビジュアルエディタ:実際の表示を確認しつつ入力
-テキストエディタ:HTMLタグを記述する(埋め込みコードも可)
記事の入力においては、以下の動作に留意して下さい。
-[ENTER] 段落<p>を新規につくるので、行間が大きく開きます。
-[SHIFT]+[ENTER] 通常の改行です。
~
***固定ページを作る
常設的に公開する情報は「固定ページ」を使って掲載します。
固定ページを「メインメニュー」に登録することで、
一般のWebサイトと同様のイメージにすることができます。
-固定ページ>新規>タイトルと本文を書いて>更新
~
***メニューを構成する
固定ページをメニューバーに並べることで、一般的なサイトと...
メニューのカスタマイズには、「メニューの編集」と「位置の...
-メニューの編集
--外観>メニュー>固定ページやリンクをメニュー構造へドラ...
メニューに登録できるのは、固定ページ、リンク、カテゴリー...
--メニュー表記などを編集して>メニューの保存
--ラベル(実際に表示される文字列)は後から自由に変更でき...
-位置の管理
メインメニュー以外にも複数のメニューを追加することができ...
~
~
**WordPressを使う|応用編
***メディアの管理
WordPressでは画像や動画・音楽などをメディアと呼びます。
投稿や固定ページの作成中にアップする、
あるいは事前にアップしておくことも可能です。
-メディアをアップロードするには
ダッシュボード>「メディア」>「新規追加」>画像をドラッ...
-メディアの編集 メディア>ライブラリ>当該メディアの「編...
-メディアの削除 メディア>ライブラリ>当該メディアの「完...
-サンプル画像にはPublicDomainのものを用いて下さい。
http://commons.wikimedia.org/wiki/Main_Page
~
***ギャラリー機能の活用
ページ内にイメージギャラリーを設置したい場合>以下の手順...
-ページ内(固定、投稿)の希望の箇所で、「メディアの追加」...
-メディアの追加ウィンドウで「ギャラリーの作成」をクリック
-ギャラリーに表示したい画像を選択して、「ギャラリーの作成」
-候補だけが再表示されるので、順番等を入れ替え
-「ギャラリーの挿入」をクリックすると、以下のようなショー...
[gallery ids="96,95,104"]
尚、サムネイルサイズは、ダッシュボード>設定>メディア設...
~
***ウィジェット
WordPressには、ウィジェット(ブログパーツ)が多数用意され...
-ウィジェットが表示できる場所は
メインサイドバー、フッターエリア、ショーケースエリアなど
-ウィジェットの種類
--カスタムメニュー(メニューを複数持たせることができます)
--カテゴリー、タグクラウド(投稿記事を分類・検索表示でき...
--テキスト(自由なテキスト、HTMLの埋め込みコードも使えま...
--メタ情報(ログインボタン等が表示されます)
--その他、カレンダー、アーカイブなど多数あります。
テーマによっては、複数のページテンプレートを持っている場...
サイドバーが表示されるタイプのテンプレートを使用して下さ...
~
***[[カテゴリーとタグ>InformationDesign#CategoryTag]]
WordPressでは、投稿記事(情報要素)にカテゴリーとタグを付...
-Category:
--一定の観点から一挙に仕分けられるもので、階層構造を持つ
--要素の集合を分類する観点(視点)は無限にある*1
--観点(視点)を定めて要素を分類する際においては、
--ひとつの要素が2つ以上のカテゴリーに重複して存在するこ...
-TAG:
--要素に関連する「目印」で、系統的に整理されるものではない
--タグは、分類上の「観点」とは無関係に存在する
--ひとつの要素には複数のタグをつけることができる
~
***プラグインについて
WordPressには、SEO対策、表示機能追加など、
様々な「プラグイン」を追加導入することができます。
以下、いくつかの事例を紹介します。
-[[Count per Day>Google:Count per Day]]
ダッシュボード内でサイトの統計情報(アクセス状況)が確認...
-[[contact form 7>Google:WordPress contact form 7]]
問い合わせフォーム等を簡単にページ内に設置できるプラグイ...
~
~
~
終了行:
*WordPressの活用
CMSによるWebサイトの構築と運営|約3時間
~
//**受講者の方へ
//&color(red){講習お疲れ様でした。成果物(サイト)の確認...
//-Webサイトは、アップしてすぐに検索でヒットするものでは...
//-今は不要…ということで、作成したサイトを削除するには・...
//--ダッシュボードにログインします
//--左のメニュー > ツール > サイトの削除
//※サイトの削除後は、念のため当該URLにアクセスして、サイ...
//~
//#hr
#contents2_1
~
**はじめに
この実技講習では、皆様のお仕事の現場における情報の発信、...
-1) 「記事」を投稿する
--内容は、文化祭、体育祭などの学校行事の案内(架空のもの...
--行事名、日時、場所などに、簡単な説明文を加えて構成しま...
--「カテゴリー」と「タグ」も指定します。
-2) 「固定ページ」を作成してメニューに登録する
--授業のページ、〇〇委員会のページ、○○部のページなど、テ...
--見出し、本文(簡単な説明)と写真で構成します。
~
~
**WordPressとは
Webサイト構築における事実上の標準、今最も注目度の高い[[CM...
-[[GoogleTrends: WordPress, Drupal, Joomla, Movable Type,...
~
***以下の2種類の公式サイトがあります。
-http://ja.wordpress.com/
ブログサービスを利用するならこちら
-http://ja.wordpress.org/
自前のサーバーを用意してパッケージをインストールするなら...
~
***特徴
-ライセンスGPLのオープンソース。無料で入手(活用)できま...
-Webに関する専門的な知識がなくても、すぐに活用できます。
-技術を段階的に身につけていけば、最終的には
すべてを自分の手でカスタマイズすることができます。
~
~
**WordPressの導入
***TYPE1 : wordpress.com の利用
&color(red){本講習では、こちらをメインに使います。};
-[[WordPress.com でアカウントを作成>http://ja.wordpress.c...
必要なのはメールアドレスだけです。開設には5分もかかりませ...
-参考:[[WordPress.comの登録手順>WordPress/Account]]
//http://www.8seminar.com/wp_all/wordpresscom_entry/
~
***TYPE2 : WordPressのパッケージをインストール
&color(red){本講習では、体験的に利用します。};
//ログインは以下から
http://opensquarejp.hotcom-web.com/wordpress/
WordPressは、一般的なHTMLサイトとは違って、サーバー側で「...
-レンタルサーバーは、以下の条件を満たす必要があります。
--[[PHP]](HyperText PreProcessor)が使えるサーバーである...
--データベース[[MySQL>Google:MySQL]]が使えるサーバーであ...
-以下、無料のレンタルサーバーでその条件を満たす例です。
WordPressのインストールが標準でサポートされているので、手...
--[[WPblog>http://www.wpblog.jp/]]
~
~
~
**WordPressを使う|基礎編
以下、WordPressの基本的な使い方を概説します。
~
***サイトの管理
サイトの管理は「ダッシュボード」から行います。
-ダッシュボードにログインするには、
--ページ内に「ログイン」の表示がある場合はそれをクリック。
--あるいは、以下のように直接PHPファイルにアクセスします。
http://(WordPressサイトのURL)/wp-admin/
-ダッシュボード内には、以下のようなメニューがあります。
--投稿(記事の投稿管理です)
--メディア(画像などのメディアファイルを一括管理します)
--固定ページ(投稿とは異なるスタティックなページが作れま...
--外観の設定(テーマ、メニュー、ウィジェット)
--プラグイン(プラグインの追加で機能の拡張ができます)
--ユーザー(一つのサイトを複数のユーザで編集できます)
--ツール(エクスポート、インポート)
--設定(タイトル、キャッチフレーズ、フロントページの設定...
~
***外観の設定
まず、基本的な外観の変更を試してみましょう。
-テーマの変更
サイトの外観はページの雛形となるHTML構造とCSSによって決ま...
これをセットで扱っているのが「テーマ」で、その変更は非常...
--外観>テーマの変更>1つ選んで「有効化」
--有料のものと無料のものがあります。上のメニューで「無料...
--WPにはデフォルトテンプレートがあります。
例えば2011年の標準テンプレートには、Twenty Eleven など、...
-ヘッダー画像の変更
--外観>ヘッダー>・・・
-サイト名(タイトル)とキャッチフレーズ(サブタイトル)
--設定>一般設定> でこれらを変更することができます。
-フロントページの設定
サイトのトップには、「最新の投稿」あるいは「固定ページ」...
--設定>表示設定>フロントページの表示 で変更できます。
--外観>カスタマイズ>フロントページの表示 でも同様。
~
***記事の投稿
本来のブログ記事を書いて公開する場合は、「記事の投稿」か...
-投稿>新規>タイトルと本文を書いて>公開
-ダッシュボード右上の「表示オプション」で「ディスカッショ...
-記事の削除は、投稿>投稿一覧>不要な記事を選択>操作ー削除
''エディタの使い方''
投稿、固定ページのエディタは「ビジュアルエディタ」と「テ...
-ビジュアルエディタ:実際の表示を確認しつつ入力
-テキストエディタ:HTMLタグを記述する(埋め込みコードも可)
記事の入力においては、以下の動作に留意して下さい。
-[ENTER] 段落<p>を新規につくるので、行間が大きく開きます。
-[SHIFT]+[ENTER] 通常の改行です。
~
***固定ページを作る
常設的に公開する情報は「固定ページ」を使って掲載します。
固定ページを「メインメニュー」に登録することで、
一般のWebサイトと同様のイメージにすることができます。
-固定ページ>新規>タイトルと本文を書いて>更新
~
***メニューを構成する
固定ページをメニューバーに並べることで、一般的なサイトと...
メニューのカスタマイズには、「メニューの編集」と「位置の...
-メニューの編集
--外観>メニュー>固定ページやリンクをメニュー構造へドラ...
メニューに登録できるのは、固定ページ、リンク、カテゴリー...
--メニュー表記などを編集して>メニューの保存
--ラベル(実際に表示される文字列)は後から自由に変更でき...
-位置の管理
メインメニュー以外にも複数のメニューを追加することができ...
~
~
**WordPressを使う|応用編
***メディアの管理
WordPressでは画像や動画・音楽などをメディアと呼びます。
投稿や固定ページの作成中にアップする、
あるいは事前にアップしておくことも可能です。
-メディアをアップロードするには
ダッシュボード>「メディア」>「新規追加」>画像をドラッ...
-メディアの編集 メディア>ライブラリ>当該メディアの「編...
-メディアの削除 メディア>ライブラリ>当該メディアの「完...
-サンプル画像にはPublicDomainのものを用いて下さい。
http://commons.wikimedia.org/wiki/Main_Page
~
***ギャラリー機能の活用
ページ内にイメージギャラリーを設置したい場合>以下の手順...
-ページ内(固定、投稿)の希望の箇所で、「メディアの追加」...
-メディアの追加ウィンドウで「ギャラリーの作成」をクリック
-ギャラリーに表示したい画像を選択して、「ギャラリーの作成」
-候補だけが再表示されるので、順番等を入れ替え
-「ギャラリーの挿入」をクリックすると、以下のようなショー...
[gallery ids="96,95,104"]
尚、サムネイルサイズは、ダッシュボード>設定>メディア設...
~
***ウィジェット
WordPressには、ウィジェット(ブログパーツ)が多数用意され...
-ウィジェットが表示できる場所は
メインサイドバー、フッターエリア、ショーケースエリアなど
-ウィジェットの種類
--カスタムメニュー(メニューを複数持たせることができます)
--カテゴリー、タグクラウド(投稿記事を分類・検索表示でき...
--テキスト(自由なテキスト、HTMLの埋め込みコードも使えま...
--メタ情報(ログインボタン等が表示されます)
--その他、カレンダー、アーカイブなど多数あります。
テーマによっては、複数のページテンプレートを持っている場...
サイドバーが表示されるタイプのテンプレートを使用して下さ...
~
***[[カテゴリーとタグ>InformationDesign#CategoryTag]]
WordPressでは、投稿記事(情報要素)にカテゴリーとタグを付...
-Category:
--一定の観点から一挙に仕分けられるもので、階層構造を持つ
--要素の集合を分類する観点(視点)は無限にある*1
--観点(視点)を定めて要素を分類する際においては、
--ひとつの要素が2つ以上のカテゴリーに重複して存在するこ...
-TAG:
--要素に関連する「目印」で、系統的に整理されるものではない
--タグは、分類上の「観点」とは無関係に存在する
--ひとつの要素には複数のタグをつけることができる
~
***プラグインについて
WordPressには、SEO対策、表示機能追加など、
様々な「プラグイン」を追加導入することができます。
以下、いくつかの事例を紹介します。
-[[Count per Day>Google:Count per Day]]
ダッシュボード内でサイトの統計情報(アクセス状況)が確認...
-[[contact form 7>Google:WordPress contact form 7]]
問い合わせフォーム等を簡単にページ内に設置できるプラグイ...
~
~
~
ページ名: