更新日 2021.04.20

#1 CMSについて

CMSとフレームワーク

CMS(Contents Management Systemコンテンツ マネジメント システム)とは、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フォルダに入れ、仮に80003-wordpressとリネームします。
次にブラウザで管理画面に入り手順通りにインストールを進めます。インストールすると、自動的にデータベースのテーブルを作成します。
▼ブラウザでの設定方法

Listen 8003
<virtualhost *:8003>
  DocumentRoot "/Users/ユーザー名/job/stg/8003-cbc-wp/"
</virtualhost>
MAMPのhttpd-vhosts.confを編集してブラウザでアクセスできるように設定します。MAMPを再起動します。

先にphpMyAdminでデータベースを作ります。名前は仮にwordpressとしましょう。
データベースの作り方は応用1 #9 を思い出しましょう。

localhost:8003にアクセスするとこのような画面が出ます。


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



必要事項を入れます。サイトのタイトルは適当につけましょう。メールアドレスは自分のアドレスを入力。パスワードは忘れないようにしましょう。


ログインボタンを押すと管理画面に移動します。


先程設定したメールアドレスとパスワードを入力します。


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]フォルダを作成していきます。
*は必須ファイルです。

htmlサイトをWordpressに移植する

以前作った架空のレストランサイトのscss化したデータがあると思います。
基礎1 #8で作成したレストランサイトのデータをWordpressに移植しCMS化してみましょう。
データがない場合はこちらからダンロード してください。

新しく作る場合はフォルダ名restaurantを作成し、データを全てコピーしてみましょう。
その後新たに、functions.phpstyle.cssというファイルを用意します。(cssフォルダ内のstyle.cssとは別のものです)
また、css、img、scssフォルダはassetsフォルダに入れておきましょう。

①functions.php作成


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

②style.css作成


/*
Theme Name: CBC restaurant
Theme URI: https://cbc-study.com/
Description: WordPressで作ったはじめてのテーマ
Version: 1.0
Author: Shimokita Taro
*/
@import url("assets/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、sidebarなど、どのページでも使用する共通の項目があります。
そのようなどのページでも使い回せるように表示部分を部品化モジュール して管理することをモジュールテンプレート化するといいます。
今回の例ではheaderとfooter部分をモジュールテンプレート化してみましょう。
テンプレートはheader.phpというように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(); ?>/assets/css/import.css" media="all" />
<?php wp_head(); ?>
</head>
<body>

  <header class="header">
    <ul class="header__sns">
      <li>
        <a href="#">
          <img src="<?php echo get_template_directory_uri(); ?>/assets/img/sns01.png" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="<?php echo get_template_directory_uri(); ?>/assets/img/sns02.png" alt="">
        </a>
      </li>
    </ul>
    <ul class="header__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>
まず過去に作成したindex.htmlの<!DOCTYPE html>から</header>までをコピーして新規ファイルにペーストしheader.phpという名前で保存しましょう。

wordpressになったことで各ファイルが置いてあるディレクトリの階層が変更になります。
リンク部分をテンプレートタグと呼ばれるwordpressの独自関数である get_permalink(n)関数でファイルパスを指定します。 get_permalink(0)の引数の数字は、記事ページ一つ一つに振られているIDを指定します。※引数にはひとまず0を入れています

get_template_directory_uri()は選択しているテーマ名、ここではrestaurant ディレクトリを示します。 ここでは/assets/imgディレクトリまでのパスhttp://localhost:8003/wp-content/themes/restaurant/というパスが自動で取得できます。

bloginfo('name')で、ワードプレス管理画面で設定したblog名が入ります。
wp_head()は、ワードプレスが設定しているhead情報が自動的に挿入されます。

footer.php


<?php wp_footer(); ?>

<footer class="footer">
 <div class="footer__inner">
  <ul class="footer__inner-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__inner-sns">
   <ul>
    <li>
     <a href="#">
      <img src="<?php echo get_template_directory_uri(); ?>/assets/img/sns01.png" alt="">
     </a>
    </li>
    <li>
     <a href="#">
      <img src="<?php echo get_template_directory_uri(); ?>/assets/img/sns02.png" alt="">
     </a>
    </li>
   </ul>
   <div class="copyright">© 2019 CRI Inc</div>
  </div>
 </div>
</footer>

</body>
</html>
footer.phpを作成し、上記の内容を入れましょう。
<?php wp_footer(); ?>は</body>直前に入れたい、ワードプレスが設定している情報が挿入されます。

▼ wordpress独自関数の一部
<?php bloginfo('name'); ?>
  管理画面 > 一般設定 で設定した"サイトのタイトル"が出力されます。
<?php wp_title(); ?>
  管理画面 > 一般設定 で設定した"キャッチフレーズ"が出力されます。
<?php echo get_template_directory_uri(); ?>
  テンプレートディレクトリを表示します。
<?php echo get_permalink(数字); ?>
  投稿ページへのリンクを表示します。
他にもたくさんありますので、必要なときに覚えましょう。wordpress Codex日本語版

#5 TOPページを作る

WordpressでTOPページを作りましょう。
まずindex.htmlをコピーしindex.phpという名前のファイルを作ります。
index.phpのheader部分とfooter部分に、 テンプレートheader.phpfooter.phpを読み込ませます。

読み込み方としては、get_***()関数を使ってモジュールテンプレートを読み込みます。
get_header()関数はheader.phpを読み込むために用意されたwordpressの独自関数となります。

/* ↓header.phpに記述した部分
 * <!DOCTYPE html> から </header>タグまで
 * を削除して、以下を追記 */
<?php get_header(); ?>

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

  </section>

/* ↓footer.phpに記述した部分
 * <footer class="footer"> から </html>タグまで
 * を削除して、以下を追記 */
<?php get_footer(); ?>

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

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


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

⑦テーマの変更

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

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

結果


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

小テスト

index.phpのheader以降のコンテンツにある画像リンク箇所に、header.phpで使ったようなWordpressの独自関数を使って、すべての画像が表示されるようにしてください。
悩んだときは、header.phpでcssディレクトリを示すために使った関数を思い出してみましょう。
コピーしました
RSS https://cbc-study.com/rss.xml 
質問などあればSlackで! 誰でも無料でできます。
勧誘とかないですよ
https://cbc-study.slack.com