ウェブページのWordPress化[静的ウェブページから動的ウェブページへの変換]

どのように、静的ウェブページを動的ウェブページへ変換したらよいのでしょうか？この記事で、ウェブページのWordPress化について、ご紹介します。

ウェブページのタイプ
1. 静的ウェブページ
2. 動的ウェブページ
WordPress化とは
1. 静的ウェブページから動的ウェブページへの変換
2. なぜWordPressが選ばれるのか？
ファイルのダウンロード
WordPress化の手順
まとめ
1. 関連

ウェブページのタイプ

静的ウェブページ

静的ウェブページとは、html,css, javascriptなどでコーディングされたウェブページで、保存されたデータを、そのまま配信するものです。そのため、簡単なコーディングでウェブページを作成できますが、デメリットとして、

情報を更新しづらいこと
どのユーザーにも、同じ情報しか表示できないこと

が挙げられます。

詳しくは、下記の記事をご覧ください。

静的ウェブページ - Wikipedia

動的ウェブページ

動的ウェブページとは、phpなどのプログラミング言語でコーディングされたウェブページで、アクセス状況やユーザーの操作に応じて、表示される情報が変化します。そのため、静的ウェブページと比べると、ウェブサーバーにより負荷がかかりますが、メリットとして、

アクセスごとに最新情報を表示できること
ユーザーごとに異なる情報を表示できること

が挙げられます。

詳しくは、下記の記事をご覧ください。

静的ページと動的ページの違いとメリット・デメリット

Webサイトを制作していると、静的ページと動的ページという言葉は1度は目にすると思います。しかし、この２つのページがどういうものか説明できる人は意外と少ないかもしれません。今回は、静的ページと動的ページの基本的な概要をご紹介します。

WordPress化とは

静的ウェブページから動的ウェブページへの変換

動的ウェブページを制作する場合、コンテンツ管理システムを使用することが多く、特にWordPressが選ばれているようです。WordPressを用いて、静的ウェブページを動的ウェブページに変換することをWordPress化と呼びます。

詳しくは、下記の記事をご覧ください。

なぜWordPressが選ばれるのか？

コンテンツ管理システムと動的ウェブサイト制作のソフトウェアであるWordPressですが、費用(無料)や操作性(簡単)、機能性(高度)において、その人気を獲得しているようです。

詳しくは、下記の記事をご覧ください。

サイト作成にWordPressが選ばれる10の理由

「WordPressを使用する理由は何だろうか」と悩んだことがありますか？今日は、本CMSのさまざまな用途とともに、使用する理由についても詳しく説明します。

CMSとは？～CMSを導入する10のメリット | Webマネージドサービス（運用・運営代行）、CMS導入のサイバーテック

Webサイトの構築ではほぼ必須となっているCMSについて、CMSとは？といった基本的な部分から、代表的なCMSであるWordPress、さらにCMS導入のメリットを10個のコンテンツに絞ってまとめました。

ファイルのダウンロード

今回、Krishnamurti Foundation Americaをお手本とし、WordPress化に挑戦しました。静的ウェブページのウェブデザインやコーディングについては、こちらをご覧ください。

WordPress化した動的ウェブページのファイルを無料配布しますので、ダウンロードしてください。

kfa-php ダウンロード

WordPress化の手順

テーマフォルダの作成

まずは、フォルダに名前を付けて、保存します。ファルダ名は何でも構いません。例えば、「kfa」というテーマ名にするなら、「kfa」というフォルダ名にすると判別しやすいです。

テーマフォルダ内へファイルをコピーして読み込む

次に、このフォルダ内に、静的ウェブページを構成する全ファイルをコピーして保存します。

HTMLファイル
CSSファイル
JSファイル
IMGファイル

次に、function.phpファイルを作成し、保存したCSSファイルとJSファイルがWordPressで機能するように読み込みます。そのために、次の通りに、functions.phpにコーディングします。ただし、ファイル名や保存場所などは、自分の設定したように変更してください。

function my_scripts() {

  wp_enqueue_style( 
    'style-name', get_template_directory_uri() . '/css/style.css',   array(),'1.0.0', 'all' 
  );

  wp_enqueue_script( 
    'script-name', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0.0', true 
  );

}

add_action( 'wp_enqueue_scripts', 'my_scripts' );