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

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

以前作った架空のレストランサイトの静的ページデータがあると思います。
※基礎1 #8で作成したレストランサイト

こちらのデータを使ってWordpressに移植し、動的なサイトにしてみましょう。
新しいフォルダ名をrestaurantと設定しましたので、以前作ったデータを全てコピーしてみましょう。
その後新たに、functions.phpstyle.cssというファイルを用意します。

①functions.php作成


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

②style.css作成


/*
Theme Name: CBC restaurant
Theme URI: https://cri.ne.jp/
Description: WordPressで作ったはじめてのテーマ
Version: 1.0
Author: Shimokita Taro
*/
@import url("css/import.css");
style.cssは、cssフォルダ内のstyle.cssとは別に必要となります。 テーマ名が必須項目です。このファイルにcssを記述しても良いですが、煩雑になるようであれば別途cssフォルダを用意しそのなかで管理します。 Theme Name: テーマの名前を決めます
Theme URI: サイトのURLをいれます
Description: 説明文を入れます
Version: 自分なりのバージョンを入れます
Author: 開発者の名前を入れる

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


@import url("./reset.css");
@import url("./style.css");
今後cssファイルが増えてくことを想定し、cssフォルダ内に「import.css」というファイルを作り、使うcssファイルのリンクを張ります。 cssファイルが増えたら、上記と同じように@importする。

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

headerやfooter、ナビゲーションなど、どのページでも使用する共通の項目があります。
そのようなどのページでも使い回せるように表示部分を部品化して管理することをテンプレート化するといいます。
今回の例ではheaderとfooter部分をテンプレート化してみましょう。
テンプレートはheader.phpというように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>
☆header.php
まずindex.htmlの<!DOCTYPE html>から</header>までをコピーして新規ファイルにペーストします。

wordpressになったことでファイルが置いてあるディレクトリの階層が変更になりましたので、 リンク部分を<?php echo get_permalink(0); ?> という、wordpressの独自関数でファイルパスを指定します。

タイトルなどは管理画面で指定した文字を読み込むように<?php bloginfo('name'); ?>と指定します。 こうすることでテンプレートを使い回すことが可能になります。
最後にheader.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>
☆footer.php

▼ wordpress独自関数の解説
<?php bloginfo('name'); ?>
  管理画面 > 一般設定 で設定した"サイトのタイトル"が出力されます。
<?php wp_title(); ?>
  管理画面 > 一般設定 で設定した"キャッチフレーズ"が出力されます。
<?php wp_head(); ?>
  wordpressが生成するheader情報が読み込まれる。
<?php echo get_template_directory_uri(); ?>
  テンプレートディレクトリを取得します。
<?php echo get_permalink(数字); ?>
  投稿ページへのリンク
他にもたくさんありますので、必要なときに覚えましょう。

ファイル構成はこのようになります

#5 TOPページを作る

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

/* ↓header.phpに記述した部分を削除して、以下を追記 */
<?php get_header(); ?>

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

  </section>

/* ↓footer.phpに記述した部分を削除して、以下を追記 */
<?php get_footer(); ?>

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

スクリーンショットなどを使って管理画面で見たときのテーマのサムネイル画像を作成します。
こちらの画像をダウンロードしscreenshot.pngという名前でテンプレートフォルダ内直下に入れます。

⑦テーマの変更

管理画面の 外観 > テーマ と進むと、作成した新しいテーマが表示されています。
作ったテーマを有効化させましょう。
※表示されない場合は、必要なファイルが入っているか、ファイル名が正しく記述されているかなどを確認しましょう。

サイトを表示する(http://localhost:ポート名)をクリックし表示させて見みましょう。

結果


index.phpの画像のリンク箇所が未設定なので、今はこのような表示になりますが、テンプレートheader.phpとfooter.phpはきちんと読み込めています。

小テスト

index.phpのheader以降のコンテンツにある画像リンク箇所に、header.phpで使ったようなWordpressの独自関数を使って、すべての画像が表示されるようにしてください。
コピーしました
RSS https://cbc-study.com/rss.xml
質問などあればSlackで