「WordPressのインストールとシステム環境の準備」タグアーカイブ

WordPressのテーマをカスタマイズ環境に配置!

BitnamiのWordpress Stackのインストールが終了したら、セキュリティを考慮して最新版をダウンロードしカスタマイズ環境に配置します。

はじめに

カスタマイズ環境に、WordPressのテーマの最新版をインストールします。

使用環境

WordPress   :WordPress 4.2.3

最新版のテーマのダウンロード

WordPressのテーマのダウンロードサイトにアクセスします。
dl_twenty_fifteen_001.png
WordPress公式のページでは、デフォルトのテーマの最新版を含めて様々なテーマをダウンロードできます。「Download」ボタンを押して、カスタマイズするテーマをダウンロードします。
dl_twenty_fifteen_002.png

使用していないテーマの削除と最新版のインストール

テーマのフォルダを開きます。
dl_twenty_fifteen_003.png
インストール済みのテーマをすべて削除し、ダウンロードしたテーマをコピーします。
dl_twenty_fifteen_004.png

おわりに

カスタマイズするWordPressのテーマの最新版をインストールするとともに、使用しないテーマを削除しました。

関連記事(WordPressのインストールとシステム環境の準備)

  1. サーバの利用形態を選択!
  2. サーバへのアクセス環境(パソコン環境)を整備!
  3. WordPressをレンタルサーバにインストール!
  4. WordPressを初期設定!
  5. WordPressサイトに独自ドメインを設定!
  6. WordPressのテーマを選択!
  7. WordPressのテーマのカスタマイズ環境を準備!
  8. WordPressのテーマをカスタマイズ環境に配置!

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

WordPressのテーマのカスタマイズ環境を準備!

WordPressのテーマの選択すると、次はテーマのカスタマイズをしていくことになります。インターネット上のサイトで直接カスタマイズすると、サイトの表示が乱れることになるため、パソコン上でテーマのカスタマイズを行い表示確認したのち、インターネット上のサイトに反映するようにします。

はじめに

パソコン(PC)上にWordPressのテーマをカスタマイズする環境を準備します。

「Bitnami WordPress Stack」のインストーラのダウンロード

Bitnamiのホームページより「Bitnami WordPress Stack」のインストーラをダウンロードします。
WordPress_Env_download_001.png
WordPress_Env_download_002.png

「Bitnami WordPress Stack」のインストール

インストーラを起動して、「Bitnami WordPress Stack」をインストールします。画面の案内に従って「Next」をクリックしていくだけでインストールできます。
Install_Bitnami_Wordpress_001.png
インストール中の言語の選択もできますが、英語でも問題ありません。「OK」をクリックします。
Install_Bitnami_Wordpress_003.png
すべて選択されていることを確認して、「Next」をクリックします。
Install_Bitnami_Wordpress_004.png
インストールフォルダを確認して、「Next」をクリックします。
Install_Bitnami_Wordpress_005.png
WordPressの管理者ユーザの情報を入力して、「Next」をクリックします。
Install_Bitnami_Wordpress_006.png
ブログ名を入力して、「Next」をクリックします。
Install_Bitnami_Wordpress_007.png
「Next」をクリックします。
Install_Bitnami_Wordpress_008.png
「Next」をクリックします。
Install_Bitnami_Wordpress_009.png
「Next」をクリックします。
Install_Bitnami_Wordpress_011.png
「Finish」をクリックします。
Install_Bitnami_Wordpress_013.png
「Bitnami WordPress Stack」のインストールが完了しました!

動作確認

「WordPress Manager Tool」を起動します。
Setup_Bitnami_Wordpress_001.png
「Manage Servers」タブを参照して、「MySQL Database」と「Apache Web Server」が稼働していれば問題なしです。他にも、MySQLや、Apacheをインストールしているとポート番号がかぶって、起動しないことがあります。その場合には、MySQLとApacheのポート番号を変えるとよいでしょう。
Setup_Bitnami_Wordpress_002.png
「WordPress Manager Tool」起動画面で「Open phpMyAdmin」をクリックすると、phpによるMySQLの管理画面が開きます。
Setup_Bitnami_Wordpress_011.png
「WordPress Manager Tool」起動画面で「Go To Application」をクリックすると、ホームページが開きます。
Setup_Bitnami_Wordpress_012.png
「WordPress Manager Tool」起動画面で「Open Application Folder」をクリックすると、WordPressがインストールされたフォルダが開きます。
Setup_Bitnami_Wordpress_013.png
「WordPress Manager Tool」の起動画面で「Go To Application」をクリックし、「Access Bitnami WordPress Stack」のリンクをクリックするとサイトにアクセスできます。
Setup_Bitnami_Wordpress_021.png

補足:「MySQL」と「Apach」の停止

パソコンの余力が少ない場合は、使用しないとき以外は、「MySQL」と「Apache」のサービスを止めておきましょう。いつでも「WordPress Manager Tool」の「Manage Servers」で「Start All」をクリックすればいつでも起動することができます。
WordPress_Env_Stop_001.png
「MySQL」と「Apache」のサービスを停止します。
WordPress_Env_Stop_002.png
「MySQL」が自動起動しないように、「手動」に設定します。
WordPress_Env_Stop_003.png
「Apache」が自動起動しないように、「手動」に設定します。
WordPress_Env_Stop_004.png
「MySQL」と「Apache」が停止しました。
WordPress_Env_Stop_005.png

おわりに

「Bitnami WordPress Stack」を使用すると、比較的容易にWordPressのテーマをカスタマイズする環境を準備することができます。

関連記事(WordPressのインストールとシステム環境の準備)

  1. サーバの利用形態を選択!
  2. サーバへのアクセス環境(パソコン環境)を整備!
  3. WordPressをレンタルサーバにインストール!
  4. WordPressを初期設定!
  5. WordPressサイトに独自ドメインを設定!
  6. WordPressのテーマを選択!
  7. WordPressのテーマのカスタマイズ環境を準備!
  8. WordPressのテーマをカスタマイズ環境に配置!

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

WordPressのテーマを選択!

WordPressの楽しみの一つはテーマを選択することです。自分の好みのテーマが見つかるとよいですね!テーマは、後からでも変えられるので、とりあえずで選んでも大丈夫ですが、カスタマイズを重ねると変えにくくなるので、最初のうちにいろいろ試してみてから本格的なカスタマイズに入った方がよいと思います。

はじめに

自分のサイトに合うWordPressのテーマを選択します。ICT実験室開設時のWordPress 4.2.3では、デフォルトで以下のテーマがインストールされていました。以下から選んでみることにします。
・Twenty Thirteen
・Twenty Forteen
・Twenty Fifteen

使用環境

WordPress   :WordPress 4.2.3

Twenty Thirteen

Twenty Thirteenは、初期状態で右サイドバー2カラムのブログ向けのデザインになります。以下は、1カラムですが、ウェジェットをサイドバーに配置すると右サイドバーが表示されるようになります。
select_theme_001

Twenty Forteen

Twenty Thirteenは、初期状態で左右サイドバー3カラムのマガジンスタイルのデザインになります。
select_theme_002

Twenty Fifteen

Twenty Thirteenは、初期状態で左サイドバー2カラムのブログ向けのデザインになります。
select_theme_003

テーマの選択

ICT実験室は、ブログスタイルで記事を作成していくことと、右サイドバー2カラムのデザインにする予定であることから、Twenty Thirteenを選びました。

おわりに

サイト作成の際は、まず最初にテーマを選択する必要があります。ICT実験室は、ブログスタイルで右サイドバー2カラムのスタイルにしたいという理由で、Twenty Thirteenを選びました。ただ、しばらく使用しての感想は、新しいテーマの方が、レスポンシブル対応やモバイルファーストに対して、より適合していると思います。Twenty Forteen、Twenty Fifteenでもカラムのスタイルの変更は可能なので、Twenty Thirteenのカスタマイズが終わったら他のテーマも試してみたいと思います。

関連記事(WordPressのインストールとシステム環境の準備)

  1. サーバの利用形態を選択!
  2. サーバへのアクセス環境(パソコン環境)を整備!
  3. WordPressをレンタルサーバにインストール!
  4. WordPressを初期設定!
  5. WordPressサイトに独自ドメインを設定!
  6. WordPressのテーマを選択!
  7. WordPressのテーマのカスタマイズ環境を準備!
  8. WordPressのテーマをカスタマイズ環境に配置!

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

WordPressサイトに独自ドメインを設定!

WordPressの設定が完了し、記事の投稿ができるようになったところで、WordPressの情報発信サイトに対して独自ドメインを設定します。

はじめに

WordPressの情報発信サイトに対して独自ドメインを設定します。

使用環境

レンタルサーバ:ロリポップ!
WordPress   :WordPress 4.2.3

DNSサーバの設定変更

私の場合は、独自ドメインの取得をムームードメインで行い、レンタルサーバにロりポップを使用していることもあり、ロりポップのDNSサーバでサブドメインや独自ドメインの設定ができるように、ムームードメインのDNSサーバの設定を変更してみました。
personal_domain_001m.png
ロりポップのレンタルサーバを選択します。
personal_domain_002.png
時間がかかるようなので、数日後にロりポップのサイトにアクセスすることにします。
personal_domain_005.png

独自ドメインを情報発信サイトに設定

ロりポップのホームページで、独自ドメインを情報発信サイトに設定します。
set_personal_domain_001m.png
※私は、サブドメインを情報発信サイトに割り当てることにしたため、この設定はあまり意味を持たないのですが、独自ドメインの設定を行わないとサブドメインのメニューが表示されません。
設定の反映には、1時間以上かかることが表示されます。
set_personal_domain_003.png
あせってサブドメインの設定を行おうとしても、以下の画面が表示されます。
set_personal_domain_005.png

独自ドメインのサブドメインをWordPressの情報発信サイトに設定

いよいよ、サブドメインをWordPressの情報発信サイトに割り当てます。
personal_subdomain_024m.png
少なくとも1時間より後に、”http://<独自ドメイン>”でアクセスしてみます、WordPressで作成したサイトが閲覧できればOKですが、時間がかかることもあります。

おわりに

WordPressの情報発信サイトに対して独自ドメインの設定をおこないました。これで、めでたく”http://<独自ドメイン>”でアクセスできるようになります!DNSサーバの設定変更は、時間のかかる作業になります。

関連記事(WordPressのインストールとシステム環境の準備)

  1. サーバの利用形態を選択!
  2. サーバへのアクセス環境(パソコン環境)を整備!
  3. WordPressをレンタルサーバにインストール!
  4. WordPressを初期設定!
  5. WordPressサイトに独自ドメインを設定!
  6. WordPressのテーマを選択!
  7. WordPressのテーマのカスタマイズ環境を準備!
  8. WordPressのテーマをカスタマイズ環境に配置!

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

WordPressを初期設定!

WordPressインストール後、WordPressの初期設定を行います。

はじめに

WordPressインストール直後に行う、WordPressの初期設定を行います。
・一般設定
・投稿設定
・表示設定
・パーマリンク設定

使用環境

WordPress 4.2.3

一般設定

一般設定では、独自URLを使用する場合、以下の設定を更新します。
・WordPressアドレス(URL):(例)http://expr.ictlab101.com/
・サイトアドレス(URL)  :(例)http://expr.ictlab101.com/
setup_wordpress_001

投稿設定

投稿設定では、更新通知サービスの内容を更新します。
setup_wordpress_002

表示設定

表示設定では、フロントページの内容を更新します。
setup_wordpress_003

パーマリンク設定

ICT実験室では、記事のURLを記事のタイトル名にするため、パーマリンク設定で、カスタム構造を選択して「/%postname%」を入力して更新します。
setup_wordpress_004

おわりに

WordPressインストール直後に行う、WordPressの初期設定を行いました。

関連記事(WordPressのインストールとシステム環境の準備)

  1. サーバの利用形態を選択!
  2. サーバへのアクセス環境(パソコン環境)を整備!
  3. WordPressをレンタルサーバにインストール!
  4. WordPressを初期設定!
  5. WordPressサイトに独自ドメインを設定!
  6. WordPressのテーマを選択!
  7. WordPressのテーマのカスタマイズ環境を準備!
  8. WordPressのテーマをカスタマイズ環境に配置!

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

WordPressをレンタルサーバにインストール!

レンタルサーバを利用すると、WordPress等のCMSとよばれる機能を利用して、見栄えのするホームページを手軽に作成することができます。

はじめに

レンタルサーバを利用して、WordPressの初期セットアップを行い、情報発信するためのサイトを立ち上げます。

使用環境

レンタルサーバ:ロリポップ!
WordPress   :WordPress 4.2.3

レンタルサーバとサービスメニューの選択

レンタルサーバを選択します。事業者の選択もありますが、サービス内容の選択も必要です。サービス内容の選択では、通常は、1サイトのみであるが複数サイトであるかでメニューが変わります。複数サイト立ち上げることが可能なサービスを利用すると、あたかも複数のサーバを保持しているかのようにサイトを立ち上げることができます。

WordPress等CMSの初期設定

レンタルサーバの契約を行うと、インターネット上のホームページからサーバの設定を行うことができます。ICT実験室では、「ロリポップ!」でWordPressを使用することにしました。WordPress等のCMSのインストールも画面からできるようになっています。WordPressは、ウィザード形式で簡単にインストールできます。
install_wp_001m.png

以下の項目を事前に決めておきます。

インストール先URL  :http://<サーバ名>/<※ここを決めておく>
サイト名      :立ち上げるサイトの名前
データベース    :新規作成
ユーザID/パスワード:管理用に使用するユーザIDとパスワード
メールアドレス   :管理用に使用するメールアドレス
プライバシー    :通常は「検索エンジンにインデックス」を許すですかね!
※複数サイト立ち上げる場合、サイトの移動などを考慮して、データベースは「新規作成」にしておいた方がよいと思います。

インストールが終わると「ロりポップ!」の管理画面からURLをクリックしてサイトの表示確認ができます。
install_wp_007.png

同じく管理画面にもアクセスできます。インストール時に決めたユーザIDとパスワードでログインします。
install_wp_008.png

WordPressの管理画面が表示されます。
install_wp_009.png

注意点

WordPress等のCMSは、多くのサイトで使用されるようになった半面、脆弱性を狙った攻撃の対象にもなっています。現在では、脆弱性への対応が可能な技術を身につけることが必要となったシステムともいえます。また、更新しなくなったページを放置することによって、改竄されても気づかないなどの問題も発生しているとのことで、定期的にホームページの内容を確認することや、不要なサイトを閉じることもしっかりと考慮に入れておきましょう。

おわりに

レンタルサーバを利用すると、WordPress等のCMSとよばれる機能を利用して見栄えのするホームページを手軽に作成できるようになりますが、サイトの改竄対策など脆弱性に対する対応も学ぶ必要があります。

関連記事(WordPressのインストールとシステム環境の準備)

  1. サーバの利用形態を選択!
  2. サーバへのアクセス環境(パソコン環境)を整備!
  3. WordPressをレンタルサーバにインストール!
  4. WordPressを初期設定!
  5. WordPressサイトに独自ドメインを設定!
  6. WordPressのテーマを選択!
  7. WordPressのテーマのカスタマイズ環境を準備!
  8. WordPressのテーマをカスタマイズ環境に配置!

関連記事(目次)

  1. インターネットで情報発信!




サーバへのアクセス環境(パソコン環境)を整備!

レンタルサーバやVPSサーバを利用するためは、サーバへのアクセス環境とコンテンツの作成環境を整備する必要があります。今回は、サーバへのアクセス環境(パソコン環境)を整備します。

はじめに

サーバへのアクセスを行うためのパソコンの環境を整備します。

サーバへのアクセスを行うためのソフトウェア

使い勝手とセキュリティが両立したソフトウェアあらかじめ準備しましょう。
<SFTPが使用できるファイル転送ソフトウェア(例)>
WinSCP
<SSHが使用できるターミナルソフトウェア(例)>
Putty
TerTerm Pro
<稼働確認を行うためのブラウザ(例)>
※最初の稼働確認のみであれば、OSに付属のブラウザで問題ありません。

サーバへのアクセスを行うためのソフトウェア

<表示確認を行うためのブラウザ>
シェアの多いブラウザで確認できるようにしましょう。本格的に複数のバージョンでの確認する場合は、1つのPC上に複数の仮想環境を構築して、なるべく少ない台数のPCですむように工夫します。
Chrome
Firefox
Internet Explorer
<メール送受信を行うためのメールソフトウェア(例)>
メールの受付を行う場合に使用します。
Thunderbird
<スマートフォン>
スマートフォンからのアクセス確認を行う場合に必要になります。本格的に複数のスマートフォンで確認する場合は、スマートフォンのレンタル業者を利用します。
<携帯電話>
携帯電話からのアクセス確認を行う場合に必要になります。 パケ放題の携帯電話であることを確認しておきましょう!本格的に複数の携帯電話で確認する場合は、携帯電話のレンタル業者を利用します。

その他

主に、コンテンツ開発を行う際に使用することが多いのかもしれませんが、utf-8にもしっかり対応したエディタは何かと重宝します。
サクラエディタ(Sakura Editor)

おわりに

コンテンツの改竄等の被害が発生してますので、ユーザID/パスワードの漏洩が無いように、サーバへアクセスする際は、FTP、TELNETは避けてSFTP、SSHを最初から使用するようにします。

関連記事(WordPressのインストールとシステム環境の準備)

  1. サーバの利用形態を選択!
  2. サーバへのアクセス環境(パソコン環境)を整備!
  3. WordPressをレンタルサーバにインストール!
  4. WordPressを初期設定!
  5. WordPressサイトに独自ドメインを設定!
  6. WordPressのテーマを選択!
  7. WordPressのテーマのカスタマイズ環境を準備!
  8. WordPressのテーマをカスタマイズ環境に配置!

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

サーバの利用形態を選択!

インターネットで情報発信をするためにはサーバが必要になりますが、自前でたてる以外に様々な選択肢があります。

はじめに

インターネットで情報発信する際のサーバの利用形態について整理します。

サーバの利用形態

サーバの利用形態には、以下の選択肢があります。

①ホームページ/ブログ作成等のサービスを利用
②レンタルサーバを利用
③VPSサーバを利用
④自前でサーバを構築

以下、個別に特徴を整理します。

利用形態①:ホームページ/ブログ作成等のサービスを利用

<サーバの管理(ハードウェア)>
・サーバを自分で用意し、管理する必要がありません。

<OS等ソフトウェアの選択>
・OS、ソフトウェアの選択はできず、何を使用しているかも分かりません。

<サイトのレイアウト>
・細かなレイアウトのコントロールができませんが、短時間でサイトを構築できます。

<掲載内容>
・自分が情報発信したい内容を掲載可能か(商用利用可能かなど)、利用規約に注意します。

<その他>
フリーの場合は一般に、広告表示の制御が難しいです。

利用形態②:レンタルサーバを利用

<サーバの管理(ハードウェア)>
・サーバを自分で用意し、管理する必要がありません。

<OS等ソフトウェアの選択>
・OS、ソフトウェアの選択はできず、何を使用しているかも分かりません。ただし、コンテンツをファイル転送でアップロードすることが可能です。WordPress等のインストールが画面から簡単にできることがメリットです。

<サイトのレイアウト>
WordPressや自前のHTML等で、自由にカスタマイズできます。

<掲載内容>
・自分が情報発信したい内容を掲載可能か(商用利用可能かなど)、利用規約に注意します。

<その他>
・サーバのスペックを選ぶことができません。
・独自SSLを使用したい場合に、自分で証明書を購入して使用できることが少ないです。

利用形態③:VPSサーバを利用

<サーバの管理(ハードウェア)>
・サーバを自分で用意し、管理する必要がありません。

<OS等ソフトウェアの選択>
・一般に、インストールするOSをいくつかの選択肢の中から選ぶことができ、管理者権限を使用することができます。OSのインストール後、ツールの導入なども可能です。

<サイトのレイアウト>
WordPressや自前のHTML等で、自由にカスタマイズできます。

<掲載内容>
・自分が情報発信したい内容を掲載可能か(商用利用可能かなど)、利用規約に注意します。

<その他>
・サイトアクセス数多く、サーバ負荷が高い場合に、スペックを選んでサーバの契約をすることができます。
・独自SSLを使用する場合に、価格やマルチドメイン対応など、自分のサイトに合う証明書を購入して使用することができます。

利用形態④:自前でサーバを構築

<サーバの管理(ハードウェア)>
・サーバのハードウェア、設置場所、電源、IPアドレスを、すべて自前で準備する必要があります。

<OS等ソフトウェアの選択>
・自由に選択することができます。

<サイトのレイアウト>
WordPressや自前のHTML等で、自由にカスタマイズできます。

<掲載内容>
・掲載内容は、法律/倫理/道徳等に反しない限り自由になります。

<その他>
・自前なので、信頼性がVPSサーバやレンタルサーバより低くなる可能性があります。セキュリティ対策もすべて自分で対処することになります。

補足

どの利用形態を採用するにしても、以下の作業は別途必要になります。
・独自ドメインの取得は、別途自分で行う必要があります。
・データのバックアップは、事業者任せでなく自分でも行います。

おわりに

サイトの成長に伴い①→②→③の遷移をたどることが多いと思います。ICT実験室は、①→②に遷移しました。遷移の一番の理由は、①では広告表示の制御が難しかったことです。

関連記事(WordPressのインストールとシステム環境の準備)

  1. サーバの利用形態を選択!
  2. サーバへのアクセス環境(パソコン環境)を整備!
  3. WordPressをレンタルサーバにインストール!
  4. WordPressを初期設定!
  5. WordPressサイトに独自ドメインを設定!
  6. WordPressのテーマを選択!
  7. WordPressのテーマのカスタマイズ環境を準備!
  8. WordPressのテーマをカスタマイズ環境に配置!

関連記事(目次)

  1. インターネットで情報発信!