#1 CMSについて

CMS(Contents Management Systemコンテンツ マネジメント システム)とフレームワーク

CMSとは、Webページなどのコンテンツを管理し、htmlを書かなくても文字や画像の挿入や、ページの追加などができるシステムです。 仕組みとしては、あらかじめWebページ(html)内に追加変更したい部分を決めてPHPで記述しておきその部分に、 データベースで保存・管理しているデータをつかって表示またはデータの変更を行います。
簡単に言えば「ホームページ」を作るための機能を一式取り揃えている「完成品」のイメージです。そこにユーザー独自のデザインを反映させていきます。

有名なCMS

 WordPressワードプレス
 Joomla!ジュームラ
 Drupal *ドルーパル
 Magentoマジェント
 *Drupalはフレームワークという認識もあります。

似たようなものとして「フレームワーク(Webアプリケーションフレームワーク)」というものがありますが、 CMSより自由度が高く複雑になっており学習コストも高くなります。会員登録機能や管理者の役割などを制御する アプリケーションにとって必要な機能を「ライブラリ群」として持っており、それらの道具を組み合わせて作っていきます。

有名なフレームワーク

(Ruby)
 Ruby on Railsルビー オン レイルズ
(Java)
 Strutsストラッツ
 Java EEジャバ EE
 Springスプリング
(PHP)
 Lalavelララベル
 CakePHPケイクPHP
 Symfonyシンフォニー
(Python)
 Djangoジャンゴ

#2 WordPressのインストールと初期設定

WordPressのインストール

CMSの定番であるWordPressをインストールしてみましょう。
WordPressダウンロードサイトへ

ダウンロードをしたら解凍します。
解答したらstgフォルダに入れ、リネームします。

httpd-vhosts.confを編集、MAMPを再起動し、localhost:ポート番号 でアクセスしましょう。
phpMyAdminでデータベースを作ります。名前はなんでも結構です。

先程作ったデータベース名を入力します。その他は表示のとおりです。



サイトのタイトルは適当につけましょう。メールアドレスは自分のアドレスを入力。



phpMyAdminを確認するとデータベースが作成されます。

WordPressの初期設定

左上のブログ名をマウスオーバーして「サイトを表示」をクリックすると、Webサイトにリンクします。
特に無味乾燥なテーマでコンテンツが表示されています。
サイトの上部に管理ツールバーが出ていますので、削除します。
レフトナビのユーザーから管理者の名前(ここではadmin)をクリック
ツールバーの「サイトを見るときにツールバーを表示する」のチェックを外し、最下部の[ プロフィールを更新 ]をクリックします。

#3 独自テーマを作る

テーマを入れるフォルダ

wp-content > themes(テーマ) > 自分で考えたテーマ名 となります。同じ階層には予め用意されているテーマや 新たにダウンロードしたテーマなども入ります。
この中に、テーマを作る上で最低限必要なファイルとして、
・functions.php *
・header.php
・index.php
・page.php
・footer.php
・style.css *
・screenshot.jpg
を用意し、画像やcss用のフォルダとして、[css][js][images]フォルダを作成していきます。
*は必須ファイルです。

静的ページをWordpressに移植する

以前作った架空のレストランサイトの静的ページデータがあると思います。 こちらのデータを使ってWordpressに移植し、動的なサイトにしてみましょう。
新しいフォルダ名を「restaurants」と設定し、以前作ったデータを全てコピーしてみましょう。
その後新たに、functions.phpstyle.cssというファイルを用意します。

①functions.php作成

functions.phpはサイトの設定を記述していくファイルですが、ここではひとまずコメントのみです。
また今後は、ファイル全体がphpのみの場合(html記述がない場合)は、綴じカッコ ?> を記載しないでください。

<?php
/**
 * brand-A
 *
 */

②style.css作成

style.cssは、cssフォルダ内のstyle.cssとは別に必要となります。 テーマ名が必須項目です。このファイルにcssを記述しても良いですが、煩雑になるようであれば別途cssフォルダを用意しそのなかで管理します。

/*
Theme Name: Naracy
Theme URI: http://www.cri.ne.jp/
Description: WordPressで作ったはじめてのテーマ
Version: 1.0
Author: Your Name
*/
@import url("css/import.css");

③cssフォルダ内にimport.cssを作成

今後cssファイルが増えてくことを想定し、cssフォルダ内に「import.css」というファイルを作り、使うcssファイルのリンクを張ります。

@import url("./reset.css");
@import url("./style.css");
/*cssファイルが増えたら、上記と同じように@importする*/

#4 共通部分のテンプレート化

headerやfooter、ナビゲーションなど、どのページでも使用する共通の項目があります。そのような箇所をテンプレート化し、 どのページでも使い回せるようにします。
今回の例ではheaderとfooter部分をテンプレート化してみましょう。

コピーしてきたhtmlからheadとheader部分を抜き出し、そこにphpを埋め込むと以下のようになります。 <?php *** ?>のなかにwordpress独自関数を入れていきます。
それぞれheader.php、footer.phpという名前で保存しましょう。
▼header.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » <?php } ?> <?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/import.css" media="all" />
<?php wp_head(); ?>
</head>
<body>

  <header>
    <ul class="sns">
      <li>
        <a href="<?php echo get_permalink(0); ?>">
          <img src="<?php echo get_template_directory_uri(); ?>/img/sns01.png" alt="">
        </a>
      </li>
      <li>
        <a href="<?php echo get_permalink(0); ?>">
          <img src="<?php echo get_template_directory_uri(); ?>/img/sns02.png" alt="">
        </a>
      </li>
    </ul>
    <ul class="navi">
      <li><a href="<?php echo get_permalink(0); ?>">PHILOSOPHY</a></li>
      <li><a href="<?php echo get_permalink(0); ?>">NEWS</a></li>
      <li><a href="<?php echo get_permalink(0); ?>">MENU</a></li>
      <li><a href="<?php echo get_permalink(0); ?>">ACCESS</a></li>
      <li><a href="<?php echo get_permalink(0); ?>">CONTACT</a></li>
    </ul>
  </header>
▼ wordpress独自関数の解説

<?php bloginfo('name'); ?>  /*管理画面 > 一般設定 で設定した"サイトのタイトル"が出力されます。*/
<?php wp_title(); ?>        /*管理画面 > 一般設定 で設定した"キャッチフレーズ"が出力されます。*/
<?php wp_head(); ?>         /*wordpressが生成するheader情報が読み込まれる。*/
<?php echo get_template_directory_uri(); ?>    /*テンプレートディレクトリを取得します。*/
<?php echo get_permalink(); ?>                 /*投稿ページへのリンク*/
▼footer.php

<?php wp_footer(); ?>
<footer class="footer">
 <div class="footer_inner">
  <ul class="footer_navi">
   <li><a href="<?php echo get_permalink(0); ?>">PHILOSOPHY</a></li>
   <li><a href="<?php echo get_permalink(0); ?>">NEWS</a></li>
   <li><a href="<?php echo get_permalink(0); ?>">MENU</a></li>
   <li><a href="<?php echo get_permalink(0); ?>">CONTACT</a></li>
  </ul>
  <div class="footer_sns">
   <ul>
    <li>
     <a href="<?php echo get_permalink(0); ?>">
      <img src="<?php echo get_template_directory_uri(); ?>/img/sns01.png" alt="">
     </a>
    </li>
    <li>
     <a href="<?php echo get_permalink(0); ?>">
      <img src="<?php echo get_template_directory_uri(); ?>/img/sns02.png" alt="">
     </a>
    </li>
   </ul>
   <div class="copyright">© 2019 CRI Inc</div>
  </div>
 </div>
</footer>

</body>
</html>

#5 TOPページを作る

WordpressでTOPページを作る場合、まずindex.htmlをコピーし、index.phpという名前のファイルを作ります。
index.phpのheader部分とfooter部分を、先程作ったテンプレートheader.php、footer.phpをincludeインクルード(読み込む)します。
読み込み方としては、get_***()関数を使ってテンプレートを読み込みます。get_header()関数はheader.phpを読み込む独自関数となります。

/* headerがあった部分に以下を追記 */
<?php get_header(); ?>

 <section class="page_top">
   <h1><img src="/img/cbc_logo_white.svg" alt=""></h1>
 </section>
  ・
  ・
  ・
  ・
  <section class="access">

  </section>

/* footerがあった部分に以下を追記 */
<?php get_footer(); ?>

⑥テーマのスクリーンショットを作成

スクリーンショットなどを使ってテーマのサムネイル画像を作成します。
こちらの画像(screenshot.png)をダウンロードし、テンプレートフォルダ内に入れます。

⑦テーマの変更

管理画面の 外観 > テーマ と進むと、新しいテーマが表示されています。このテーマを有効化させ、サイトを表示する(http://localhost:ポート名)をクリックし表示させて見みましょう。
index.phpの画像のリンク箇所が未設定なので、今はこのような表示になりますが、headerとfooterはきちんと読み込めています。

小テスト

index.phpの画像リンク箇所にWordpressの関数をいれ、すべての画像が表示されるようにしてください。
powerd by