sit in a circle and chat happily

WordPress－構築編－初日

投稿日：2022-03-08
更新日：2022-03-24
Wordpress-Logo

デザイン込みでWordPressサイトを作っていく

WordPressのインストール

WordPress用データベース領域作成

シェル（コマンドプロンプト）を使ってDB領域作成

でもできるけど、今回はphpMyAdminで作成する。

phpMyAdminを使ってDB領域作成

ブラウザを起動し、phpMyAdminを表示

左メニュー「新規作成(New)」をクリックし「データベースを作成する」にDB名を入力して「作成」ボタンを押下する。今回は「lesson1」をいう名前のDB領域を作成する。

※自分でやるときはココは好きな名前でOK

WordPressファイルを配置

WordPressの日本語公式サイトからインストールファイルをダウンロードする。

Download

WordPressファイルを公開フォルダ内に配置

今回はWordPressフォルダを「lesson1」に変更して利用する。
展開した「wordpress」フォルダの名前を「lesson1」に変更する。

変更した「lesson1」フォルダをXAMPPの公開フォルダ「htdocs」内にコピーして配置する。
レンタルサーバで利用する場合はFTPソフト等を使いさーば公開フォルダ内に配置する。

データベース情報の設定

WordPressで使用するDB情報を設定する。
ブラウザ画面から設定する方法と設定ファイルを書き換える方法がある。
通常はブラウザ画面から設定する。

ブラウザ画面から設定

ブラウザのアドレス欄にWordPressフォルダまでのURLを入力する。
※今回はXAMPP公開フォルダ直下に「lesson1」フォルダを配置していることが前提

下記URLをブラウザアドレス欄に入力してアクセス
「さあ、始めましょう！」をクリックする。

http://localhost/lesson1/
データベース名lesson1
ユーザー名データベースに設定したユーザー名
パスワードデータベースに設定したパスワード
データベースホスト名localhost

先ほど作成したDB情報を入力し「送信」ボタンをクリックする。

サイトの基本情報を入力して「WordPressをインストール」ボタンを押す。

※「検索エンジンが・・・」は、インストール時にはチェックを入れておく

「ログイン」ボタンを押して管理画面にアクセスする。

wp-config.phpを編集して設定

WordPressフォルダ直下にある「wp-config.php」を編集してDBと連携させる。
※今回はXAMPP公開フォルダ直下に「lesson1」フォルダを配置していることを前提に記述する。

「wp-config.php」内の「データベース名」「ユーザー名」「パスワード」「データベースホスト名」を編集して保存する。

/** WordPress のためのデータベース名 */
define( 'DB_NAME', 'lesson1' );

/** MySQL データベースのユーザー名 */
define( 'DB_USER', 'root' );

/** MySQL データベースのパスワード */
define( 'DB_PASSWORD', 'admin' );

/** MySQL のホスト名 */
define( 'DB_HOST', 'localhost' );

管理画面にアクセスする

http://localhost/lesson1/wp-admin

第１章：オリジナルテーマ作成

オリジナルテーマ作成

オリジナルテーマ作成の難易度

今回は「2」「3」の案件が決まっている場合のテーマ作成を想定。

WordPressを構成するもの

ホームページ：トップページ

管理画面「設定」>「表示設定」で設定

投稿：量産するページ

管理画面「投稿」
・アーカイブページ：投稿一覧
・個別投稿ページ：投稿詳細

・タクソノミー：カテゴリーとタグをまとめて呼ぶ
　・カテゴリー：投稿グループ化
　　※投稿は必ず1つのカテゴリーに属する
　　管理画面「投稿」>「カテゴリー」

　・タグ：カテゴリー横断してグループ化
　　管理画面「投稿」>「タグ」

固定ページ：1ページで完結するページ

管理画面「固定ページ」
・グローバルメニューの項目になる
・階層構造を作成できる

一覧：主に投稿一覧

最新投稿一覧
アーカイブ一覧
カテゴリ一覧
タグ一覧
日時一覧　等

オリジナルテーマの作成用プラグイン

Show Current Template：使用テンプレート確認

ページ表示に使用したテンプレートを確認するプラグイン。
WordPressをカスタマイズする時に便利。

インストール完了後「有効化」ボタンをクリックしてプラグインを有効にする。

「Show Current Template」プラグインを有効化することで、公開サイトの管理バーに「テンプレート」の項目が追加される。

管理バーの「テンプレート」にカーソルをのせると使用しているテンプレート名が表示される。

WP Muntibyte Patch

コレも入れとくといいよ。

初期設定

インストール直後、ページを作成していく前に必ず初期設定をしておく。

表示設定：「検索エンジンでの表示」
構築時は「検索エンジンがサイトをインデックスしないようにする」にチェックを入れておき、運用開始時に外す。

メディア設定：「ファイルのアップロード」
「アップロードしたファイルを年月ベースのフォルダーに整理」は
※インストール直後にチェックを外しておく。

パーマリンク設定：「投稿名」

ユーザ名をニックネームに変更

管理画面右上「こんにちは、〇〇さん」をクリック。

「ユーザー名」はログインに使用するのでそのまま使用するとセキュリティ上好ましくない。
ユーザー名とは別の「ニックネーム」を「ブログ上の表示名」に設定する。

オリジナルテーマの構成

オリジナルテーマのアップロード先

【WordPressフォルダ】/wp-content/themes フォルダ内

オリジナルテーマ用のフォルダを「wp-content」>「themes」フォルダ内に作成する。今回は「original」フォルダを作成。

※VSCodeにワークスペースを作って作業していく

・作業しやすいようにVSCodeにもプラグイン追加しておく。

【WordPress関数に表示された波線を消す】

PHP Intelephenseの設定 >「拡張機能の設定」>
最下部「項目の追加」で「WordPress」を追加する。

オリジナルテーマに必要な最小ファイル

index.php（必須）ページ表示用テンプレート
functions.phpテーマ用関数ファイル（テーマ機能設定用）
style.css（必須）テーマの定義とCSSデザイン用ファイル
screenshot.pngテーマのスクリーンショット
（推奨サイズ：幅880px 高さ660px）

オリジナルテーマ情報を記述

テーマ情報は「style.css」の先頭にCSSコメントで記述する。

/*
Theme Name: Original
Author: Masuda
Description: 練習テーマ01
Version: 1.0
*/

管理画面左メニュー「外観」>「テーマ」を選択。
作成した「original」テーマが表示されるので、有効化する。

（現時点では、まだテーマ内は何も記述していないので、サイトを表示しても真っ白。）

第２章：テンプレート

専用テンプレートと優先度

必要に応じて専用の表示テンプレートを追加できる。
表示テンプレには優先度があり優先度の高いテンプレを使用して表示する。

必要に応じて追加する主なテンプレートファイル

front-page.phpホームページ表示用テンプレ
home.php主に固定ページの上にあるブログ投稿一覧表示用テンプレ
single.php投稿詳細表示用テンプレ
page.php固定ページ表示用テンプレ
archive.phpアーカイブ一覧全般表示用テンプレ
category.phpカテゴリー一覧表示用テンプレ
tag.phpタグ一覧表示用テンプレ
search.php検索結果一覧表示用テンプレ
date.php日付別一覧表示用テンプレ
404.php404エラー表示用テンプレ
いえ、何でもないです

表示用テンプレート

最後の砦：index.php

必須ファイル「index.php」は専用表示テンプレが存在しない場合に使用される。そのため「最後の砦」として機能する。

WordPressテーマ必須関数

テーマ作成時に必ず記述しなければいけない関数が以下の3つ。

wp_head()WordPressテーマに必要なHTMLコードをhead要素内に出力する関数
wp_body_open()body要素の直後に何かを挿入する際に使用する関数（5.2以降）
wp_footer()</body>直前にscriptタグなどを出力する関数

wp_head関数：head要素内で呼び出し

wp_head関数はhead要素内で呼び出す。
特に理由がない場合は</head>の直前に記述する。

<!DOCTYPE html>
　　・
　　・
  <title>オリジナルテーマ</title>
  <?php wp_head(); ?>
</head>

WordPressに必要なCSSの読み込みやプラグインで必要になるタグの出力を行う関数。

wp_head関数を呼び出さないとWordPressの基本機能やプラグインが動かなくなるので必ず記述する。

wp_body_open関数：<body>要素直後で呼び出し

wp_body_open関数はver5.2以降で追加された関数。

Googleタグマネージャー（アクセス解析用コード）のようなbody開始タグ直後にコードを出力する必要がある場合に使用する。

<body>の直後に記述する。

<!DOCTYPE html>
　　・
　　・
<body>
  <?php wp_body_open(); ?>
  <div class="wrapper">

wp_footer関数：<body>要素直後で呼び出し

wp_footer関数はscriptタグなどを出力する関数。
</body>の直前に記述する。

<!DOCTYPE html>
　　・
　　・
  </div> <!-- .wrapper -->
  <?php wp_footer(); ?>
</body>
</html>

※3つの必須関数を記述した後、サイトを確認する。

・WordPress標準機能の管理バーが表示される
・「Show Current Template」プラグインが表示される

第３章：テンプレートコーディングとセキュリティ

外部ファイルの読み込み

WordPressでサイトを構築する際の注意

テンプレートファイルがどの階層で使用されるかわからないため、画像やCSSなどの外部ファイルを読み込む際は相対パスではなく、URL（絶対パス）で指定する。

関数を使って環境に応じた絶対パスを取得

例えばロゴ画像表示する際のURLを例に考える…

http://localhost/lesson1/wp-content/themes/original/img/logo.png

絶対パスであれば、どの階層からでも確実に画像を表示できる。

しかし、WordPressサイトをテスト環境から本番環境へ移行することを考えるとURLも移行時に変わってしまう。

テスト環境

http://localhost/lesson1/wp-content/themes/original/img/logo.png

本番環境

http://〇〇.com/wp-content/themes/original/img/logo.png

環境が変わっても対応できるよう、使用するテーマフォルダまでのURLを関数で取得する。
関数を使用することで、上記URLの太字部分を環境に応じて変更する。

テーマフォルダ内にあるファイルのURLを取得

get_theme_file_uri( string $file ='' )：string

現在のテーマフォルダまでのURLもしくは引数で指定したテーマ内ファイルまでのURLを取得する
※取得するだけなので「echo」での出力を忘れないように！！

テーマフォルダのURLを取得

 get_stylesheet_directory_uri()：string

現在のテーマフォルダ（スタイルシートがあるディレクトリ）までのURLを取得する
※取得するだけなので「echo」での出力を忘れないように！！
※親テーマ、子テーマを使用している場合は子テーマのURL

実践

http://localhost/lesson1/wp-content/themes/original/img/logo.png

上記の場所にあるロゴ画像をテンプレ内で表示するには以下の記述を使用する。echoを忘れずに記述する。

<?php echo get_theme_file_uri('/img/logo.png'); ?>
<?php echo get_stylesheet_directory_uri(); ?>/img/logo.png

XSS（クロスサイトスクリプティング）対策

XSS（クロスサイトスクリプティング）対策用関数

HTMLタグを悪用してJavaScriptを実行させるXSS対策のため、echoで出力する時はWordPressが用意しているサニタイジング関数を使用してエスケープ処理する。

出力関数と取得関数

WordPressの関数にはthe_title関数のように呼び出すと値を出力するものと、get_the_title関数のように出力せずに値を返すだけのものがある。

接頭辞「the_」の関数は呼び出すだけで適切にエスケープされた値が出力されるため安全に使用できる。
接頭辞「get_」の関数は値を返すだけで出力はしない。そのため出力したい時はエスケープ処理をした後に「echo」を使用する。

通常のエスケープ処理：esc_html関数

esc_html関数はHTMLで意味を持つ文字「<」「>」「”」「’」「&」や特殊文字を実態参照に置き換える。

既にエンコードされている場合は二重にエンコードしない。

esc_html( string $text )：string

引数

$textエスケープする文字列

属性値のエスケープ処理：esc_attr関数

esc_attr関数はHTMLで意味を持つ文字「<」「>」「”」「’」「&」や特殊文字を実態参照に置き換える。
属性に適した値になるようフィルターをとおす。
ただし、href属性やsrc属性のようなURLを指定する属性の場合は「esc_url関数」を使用する。

esc_attr( string $text )：string
$textエスケープする文字列

URLのエスケープ処理：esc_url関数

esc_url関数はURLで意味を持つ「&」や「’」を「&#038」と「&#039」に変換する。
また無効なプロトコル（デフォルトではhttp,https,ftp,ftps,mailto,news,irc,gopher,nntp,feed,and telnet）以外は拒絶する。
対象文字列の先頭に空白が入っている時は空文字列が返される。

esc_url( string $url[, array $protocols=null [,string $_context='display']] )：string
$textエスケープする文字列
$protocols有効なプロトコルを指定した配列　省略時「null」
$_context【原則指定しない】プライベート：コンテキストタイプ指定　省略時「’display’」
display用に値を処理する。変更すると内部でエスケープ処理が適切に行われない。

無害化された文字列を返す

投稿コンテンツに許可されたHTMLタグ以外のエスケープ処理：
wp_kses_post関数

wp_kses_post関数は投稿コンテンツに対して許可されたHTMLタグを除きサニタイズ（無害化）する。
HTMLタグを含む文字列のサニタイジングに使用する。
※ksesは再帰的頭字語「KSES Script Evil Scripts」

wp_kses_post( string $data )：string
$dataエスケープする文字列

無害化された文字列を返す

実践

<?php echo esc_url(get_theme_file_uri('/img/logo.png')); ?>
<?php echo esc_url(get_stylesheet_directory_uri()); ?>/img/logo.png

サイト情報を取得・表示

設定画面のサイト情報を関数を使って取得や表示ができる。

サイト情報表示：bloginfo関数

bloginfo([ string $show = ''])：void

引数で指定されたサイト情報を出力する。

ホームURLを取得：home_url関数

home_url([ string $path = ''[, string $scheme = null]])：string

ホームURLを取得する
※取得するだけなので「echo」での出力を忘れないように！

実践

ヘッダー

ヘッダーのロゴ画像をa要素でリンク化する。href属性値はhome_url関数で取得したURLを使用する。エスケープ関数とechoを忘れずに記述する。2つ表示されていたロゴは1つに修正する。

<a class="Header_logoLink" href="<?php echo esc_url(home_url()); ?>">
  <img src="<?php echo esc_url(get_theme_file_uri('/img/logo.png')); ?>" alt="ロゴ">
</a>

bloginfo関数でサイト情報を出力する。bloginfo関数は出力関数なので内部で適切なエスケープ処理済み。

ヘッダー上部にキャッチフレーズ、画像のalt属性にサイト名を出力する。

<header class="Header">
  <div class="Header_top">
    <div class="Header_inner">
      <?php bloginfo('description'); ?>
    </div>
  </div>
  <div class="Header_main">
    <div class="Header_inner">
      <div class="Header_logo">
        <a class="Header_logoLink" href="<?php echo esc_url(home_url()); ?>">
          <img src="<?php echo esc_url(get_theme_file_uri('/img/logo.png')); ?>" alt="<?php bloginfo('name'); ?>">
        </a>
      </div>
    </div>
  </div>
</header>

出力されるコード

   <header class="Header">
      <div class="Header_top">
        <div class="Header_inner">
          Just another WordPress site
        </div>
      </div>
      <div class="Header_main">
        <div class="Header_inner">
          <div class="Header_logo">
            <a class="Header_logoLink" href="http://localhost/lesson1">
              <img src="http://localhost/lesson1/wp-content/themes/original/img/logo.png" alt="練習サイト">
            </a>
          </div>
        </div>
      </div>
    </header>

フッター

フッターパーツにコピーライトを表示する。
西暦はPHPのdate関数、サイト名にbloginfo関数を使用する。

フッタ<footer class="Footer">
  <div class="Footer_inner">
    <div class="Footer_copy">
      © <?php echo esc_html(date('Y')); ?> <?php bloginfo('name'); ?>.
    </div>
  </div>
</footer>
カテゴリー
ブログ一覧

コメントは受け付けていません。