PR

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

wordpress-2
記事内に広告が含まれています。

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

スポンサーリンク

ウェブページのタイプ

静的ウェブページ

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

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

が挙げられます。

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

静的ウェブページ - Wikipedia

動的ウェブページ

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

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

が挙げられます。

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

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

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化した動的ウェブページのファイルを無料配布しますので、ダウンロードしてください。

スポンサーリンク

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' );

テーマの宣言

次に、style.cssファイルが機能するように、テーマ名を記述します。ただし、テーマ名は、自分の設定したものを入力してください。

/*
Theme Name: kfa
*/

PHPファイルの作成

次に、PHPファイルを作成します。

  • HTMLファイルをPHPファイルへ変換
  • PHPファイルをヘッダー、フッター、サイドバーへ分割
  • 固定ページ作成
  • 投稿ページ作成

これらの手順は、以下のサイトに詳しく紹介されています。

静的HTMLサイトをWordPress化するときの具体的な移行手順 | HPcode(えいちぴーこーど)
静的HTMLサイトをWordPress化するときの具体的な手順をまとめました。色々な手順が必要です。 範囲が広すぎるため、深くまで掘り下げていない部分もありますがご了承いただければと思います。ザックリとした全体像を把握できることを目的として

テーマフォルダをWordPressへアップロード

最後に、管理画面において、作成したテーマをアップロードして、有効化します。この手順は、下記のサイトを参考にしてください。

テーマのアップロード | 無料WordPressテーマ BizVektor [ ビズベクトル ]
BizVektorテーマのアップロード方法を説明しています。
スポンサーリンク

まとめ

WordPressを使用することで、静的ウェブページを動的ウェブページに簡単に変換することができます。

おすすめWordPressテーマ「Cocoon」の特長とダウンロード方法【有料テーマのLIQUID PRESS, オープンケージ, Emanon, ザ・トール】もご覧ください。

タイトルとURLをコピーしました