WordPress TwentyTwenty の子テーマの作り方

WordPress TwentyTwenty の子テーマの作り方


今回は、twentywentyの子テーマの作り方 を紹介します。
TwentySeventeenの子テーマの作り方」はこちらまで
「twentyelevenの子テーマの作り方」はこちらまで

今回もサクッと一番簡単な作り方を紹介します。

子テーマ設置方法

子テーマ設置場所

子テーマを作成する最初の行程は、子テーマディレクトリの作成です。
wp-content/themes ディレクトリ下に作成します。
子テーマディレクトリの名前には最後に ‘-child’ を付けることが推奨されます。

今回は、「twentytwenty-child」という名前のディレクトリを「wp-content/themes」ディレクトリに作ります。twentytwentyと同じディレクトリに作ると伝えた方が分かりやすいかな?

ディレクトリ作り方は、FTPアプリやレンタルサーバのファイル管理アプリ(ファイルマネージャー等)で作ります。
私はファイルマネージャーでroot>wp-content>themesと進み、新規作成でディレクトリを作成しています。下の図のようにディレクトリができればOKです。

子テーマのディレクトリ作成
子テーマのディレクトリ作成

※なお、子テーマディレクトリの名前には空白を含めないでください。エラーが発生します。

子テーマ設置必須ファイル

子テーマは、2つのファイル「style.css」と「functions.php」を作成する必要があります。

まずは、「style.css」から作ります。
Windows10のメモ帳(memo)でも保存するときに文字コードを UTF-8に指定できればWindows10のメモ帳でも作成できます。Windows7だと保存するときに文字コードを UTF-8に指定できなかったような記憶が。。。
とりあずどんなエディターでも良いので文字コードを UTF-8に指定できればOKです。

ちなみに私はディレクトリと同じでレンタルサーバーのファイルマネージャーでファイルを新規作成で作り、編集を行って作ります。

/*
 Theme Name: TwentyTwentyChild
 Template: twentytwenty
*/

Theme Name:Twenty SeventeenChild
 テーマの名称。
 ここに書いた名称が管理画面のテーマ選択画面に表示される。
 全角でも可。
 ※全角文字を入れたときにはエディタの文字コードを UTF-8 にする必要があります。

Template:twentyseventeen
 親テーマのディレクトリ名。
 大文字小文字を区別するのできっち書くこと

次に、「functions.php」を作ります。

親テーマのスタイルシートをインポートするために、子テーマの functions.php で wp_enqueue_style()を使用します。
したがって子テーマには functions.php を作成する必要があります。

私も初心者なので理解できないこともありますが、言われたとおりに作っておきます。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
 
}
?>

上の実行で親スタイルシート(「style.css」)を読み込んだ後に、子テーマのスタイルシート(「style.css」)を読み込み上書きされることになります。
しかし、なぜかうまく子テーマのスタイルシート(style.css)が読み込まれないパターンがあるそうです。
その際は、下のように明示的に子テーマを読み込むと良いらしいです。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}
?>

各々ファイルを保存したら、先ほど作った子テーマディレクトリへファイルをアップロードします。

と言うか、どんな方法でも良いので、先ほど作った子テーマディレクトリに2つのファイルを置ければOKです。ファイルマネージャーで上の2つのファイルを新規に作り編集して保存してもOKです。
実は私はファイルマネージャーでやってます。

なお、エディタの文字コードを UTF-8 で保存しましょう。

子テーマの有効化

正常にアップロード出来たら、子テーマを有効化させましょう。

サイトの管理画面にログインし、管理画面 > 外観 > テーマに移動してください。
子テーマが表示されてますか?

子テーマが表示されている状態
子テーマが表示されている状態
尚、マウスポインターを子テーマの上に持って行くと有効化ボタンが表示されます。持って行かないと表示されません。

正常にディレクトリとファイルが設置出来ていれば、有効化できる状態になっています。

なお、 子テーマを有効化したあとは、メニュー (外観 > メニュー または 外観 > カスタマイズ > メニュー) およびテーマのオプション (背景やヘッダイメージ) を保存し直す必要があります。
今まで触って居なければそのままでもOKです。

有効化ボタンをクリックしてください。
有効化した後、WordPressの各記事が正常に表示されることを確かめててください。


以上でtwentytwentyの子テーマの設定でした。

WordPress Javascriptでバーコード入力処理

Javascriptでバーコード入力処理

バーコードリーダーの入力は、何もしなくても入力される(ほぼキーボードと同じ)のですが、とりあえず入力処理の所を作ってみました。

手入力にも対応できるように英文字のチェックも簡単にですが入れてあります。特殊文字とかもほんとうはチェックしないといけないんだけど、まぁ、良いかなと……

一番上のテキストボックスは本来はhiddenタイプにして隠しテキストにしてしまいますが、テストなので見えるようにしました。

それからJavascriptそのままの処理とjQueryによる処理に別けてみました。jQueryの方が楽に処理(コーディング)できるけど、好みも有るので。
jQueryの「$」が少し気を付ける必要があるので、参考にしてください。

//本来は隠し入力テキスト。半角数字のみ格納
<input type="text" id="hidden1" style="background-color:#aaa">

//javascriptで処理
<input type="text" id="text1" oninput="CheckInput()" onchange="setChange()">
<script>
  function CheckInput(){ 
    //全角英文字チェック
    if(document.getElementById("text1").value.match(/[A-Za-zA-Za-z]/g)){
      alert("英文字が入っています。");
      return;
    }
    if (document.getElementById("text1").value.length == 13){
    //全角英数字を対象に置き換え
document.getElementById("hidden1").value=document.getElementById("text1").value.replace(/[A-Za-z0-9]/g,function(s){
        return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
      });
    }
  }
  function setChange(){
   //全角英数字を対象に置き換え
    if (document.getElementById("text1").value.length == 13){
document.getElementById("text1").value=document.getElementById("text1").value.replace(/[A-Za-z0-9]/g,function(s){
        return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
      });
    }
  }
</script>

//jQueryで処理
<input type="text" id="text2" autofocus="">
<script type="text/javascript">
  jQuery(function($){
    $("#text2").on({
      "keyup": function(e){
//全角英文字チェック
        if($(this).val().match(/[A-Za-zA-Za-z]/g)){
          alert("英文字が入っています。");
          return;
        }
        if ($(this).val().length == 13){
        //全角英数字を対象に置き換え
         $("#hidden1").val($(this).val().replace(/[A-Za-z0-9]/g,function(s){
             return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
           }));
        }
      },
      "change": function(e){
        if($(this).val().match(/[A-Za-z0-9]/g)){
         $(this).val($(this).val().replace(/[A-Za-z0-9]/g,function(s){
             return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
           }));          
        }
      }
    });
  });
</script>

実際の動きは下で。

と、書きましたが、他のWordPressで確認したjQueryのコードが全く動きません。
keyupイベントもchangeイベントも取れていない状況です。なぜかな?
ちなみにそのままのJavascriptは正常に動作しています。

このWordPressの環境(プラグインかな?いろいろ入れてるので、チェックが面倒で……)ではjQueryが動かないので、上のコーディングからjQueryの部分をカットします。jQueryの方が楽にコーディングできるけど、動かないんじゃんダメですもんね……寂しい(;_;)


//本来は隠し入力テキスト。半角数字のみ格納 //javascriptで処理

バーコードリーダーは簡易システムでは使い勝手が良いので良く使われると思います。

ただデータがキー入力バッファに溜まって一度にやって来るようなイメージなので、後ろのイベント処理をキャンセルできるとキー入力バッファに溜まったデータを破棄できそうなんですが、私は上手くキャンセルできなかったので、全角でバーコードを読み込み、プログラムで半角に変換し、変換した文字列に置き換えるような処理にしても、半角バーコードの後ろに全角バーコードが付いてきてしまう不具合が出てしまいました。

Windowsプログラムだと綺麗に処理できた記憶が有るのですが、なかなか思ったような処理にならないものですね。
まぁ、ちょいちょいとコーディングしただけなので、きっと良いでが有ると思うので、どこかで見つけたら追記します。

以上、「WordPress Javascriptでバーコード入力処理」でした。

WordPress で Javascript を使ってみる

WordPressを登録プログラム(エントリープログラム)として利用するためには、Javascript を利用するのも手軽で良いです。今回は、試しで Javascript を使ってみました。

WordPress で Javascript

今回のお試しプログラムは簡単なもので、ボタンと入力テキストと出力領域の3つをHTMLで作り、ボタンがクリックされたら入力テキストの内容を出力領域に表示すると言う単純なものです。

早速下にHTMLとJavascriptで書いてみました。動くか試しにボタン1をクリックしてください。入力テキストを変更なども試してみてください。


ボタン1をクリックすると、テキスト1の内容が下の領域に書き込まれます。




ボタン1をクリックすると、ここが書き換わります

どうでしたか?ちゃんとJavascriptは動作しましたか?

WordPress で HTML を書くには

フォーマットの カスタムHTLM を利用して HTML を書きます。

WordPressでカスタムHTLM を利用して HTML を記述する
カスタムHTLM を利用して HTML を記述します

HTML の知識が有れば、少しのことならいろいろ出来ると思います。
一応、今回のHTML・Javascriptのコードを下に示しておきます。

<input type="test" id="t1" style="width:500px;" value="テキスト1:書き換えてからボタン1をクリックすると・・・">
<br>
<input type="button" id="b1" value="ボタン1" onclick="test1()">
<br><br>
<div id="d1" style="background-color:#EDF7FF">ボタン1をクリックすると、ここが書き換わります</div>
<script type="text/javascript">
function test1(){
  //alert("");
 document.getElementById( "d1" ).innerText= document.getElementById( "t1" ).value ;
}
</script>

PHP HTML Javascript の組み合わせでプログラム

PHP、HTML、Javascript の組み合わせで簡単なエントリーシートのようなもの、エントリーされた一覧表示と詳細表示、可能ならログインや返信、ステータス管理を持ったシステムを学習の一環として書いてみたいと思っています。

細かな画面制御やセキュリティ管理をするつもりがないのですが、始めてWordPressでシステムを構築する人の取り掛かりになればと思います。

以上、「WordPress で Javascript を使ってみる」でした。

WordPress mysqli の 手続き型 と オブジェクト型

mysqli のコーディング方法は2通りあります。
手続き型とオブジェクト型です。

私も初めて知りましたので、どのような違いが有るかを確認して行きたいと思います。 

WordPress mysqli 手続き型

従来とよく似た mysqli_***() という書き方のようです。
インスタンス生成不要と説明されています。

こちらの接続は「MySQLと接続」で書いた通りです。

ちょっと進めて、最新の記事のタイトル10件を取得するPHPコードを書いてみたいと思います。

mysqliの手続き型で最新記事10件を取得するショートコード

//mysqli手続き型で最新記事10件を表示
function shortcode_GetNewPosts10(){
  global $wpdb;
  $db_host = $wpdb->dbhost;       //データベースホストの取得
  $db_dbname = $wpdb->dbname;      //データベース名
  $db_user = $wpdb->dbuser;       //データベース接続ユーザーの取得
  $db_passwd = $wpdb->dbpassword; //データベース接続用パスワードの取得
	
  $link = mysqli_connect($db_host, $db_user, $db_passwd, $db_dbname);
  if (!$link) {
    return '接続失敗です : ' . mysqli_connect_error() . ' | ' . mysqli_connect_errno();
  }

  // データ取得
  //プリペアドステートメントを作成します
  $stmt = mysqli_prepare($link, "SELECT DISTINCT post_title ,guid FROM {$wpdb->posts} where post_status='publish' and post_type='post' order by post_date DESC LIMIT ?");
  if($stmt){

    //パラメータをバインドします
	$ln = 10;
    mysqli_stmt_bind_param($stmt, "d", $ln);

    //クエリを実行します
    mysqli_stmt_execute($stmt);

    //結果変数をバインドします
    mysqli_stmt_bind_result($stmt, $post_title, $guid);

    //値を読み表を作成します  
$returnTable = "<table style='width:500px'><th'><td style='text-align:left;'>タイトル</td></th>";
    while (mysqli_stmt_fetch($stmt)) {
      $a = '<a href=""'. $guid .'" target="_blank">' .$post_title . '</a>';
      $returnTable = $returnTable . '<tr><td>' . $a . '</td></tr>';
    }
	
    //ステートメントを閉じます
    mysqli_stmt_close($stmt);
    $returnTable .= '</table>';
  } else {
	$error = mysqli_error($link);
    $errno = mysqli_errno($link);
	$returnTable = 'データ取得に失敗しました : ' . $error . ' | ' . $errno;
  }

  mysqli_close($link);
  return $returnTable;
}
add_shortcode('call_GetNewPosts10', 'shortcode_GetNewPosts10');

MYSQLIの手続き型で最新記事10件を取得するショートコードを呼び出す

タイトル
WordPress TwentyTwenty の子テーマの作り方
WordPress Javascriptでバーコード入力処理
WordPress で Javascript を使ってみる
WordPress mysqli の 手続き型 と オブジェクト型
WordPress PHP で文字列を表示する
WordPress MySQLと接続
WordPress の functions.phpについて
WordPress 始めてのPHPコード実行
PHPを始める前に
MySQL データ保存(データバックアップ)

上手く表示されていますか?
ちょっと複雑になってしまいましたが、WordPressのthe_title()関数を使わないとこんな感じになります。まぁ、あくまでも学習なので……

WordPress mysqli オブジェクト型

オブジェクト指向的な新しい書き方
インスタンス生成必要と説明されています。

こちらは始めてなのですが、とりあえず手続き型と同じことをやってみます。

MYSQLIのオブジェクト型で最新記事10件を取得するショートコード

//mysqliオブジェクト型で最新記事10件を表示
function shortcode_GetNewPosts10_2(){
  global $wpdb;
  $db_host = $wpdb->dbhost;       //データベースホストの取得
  $db_dbname = $wpdb->dbname;      //データベース名
  $db_user = $wpdb->dbuser;       //データベース接続ユーザーの取得
  $db_passwd = $wpdb->dbpassword; //データベース接続用パスワードの取得
	
  $link = new mysqli($db_host, $db_user, $db_passwd, $db_dbname);

  if (!$link) {
    return '接続失敗です : ' . mysqli_connect_error() . ' | ' . mysqli_connect_errno();
  }

  // データ取得
  //プリペアドステートメントを作成します
  $stmt = $link->prepare("SELECT DISTINCT post_title ,guid FROM {$wpdb->posts} where post_status='publish' and post_type='post' order by post_date DESC LIMIT ?");
  if($stmt){

    //パラメータをバインドします
    $ln = 10;
    $stmt->bind_param("d", $ln);

    //クエリを実行します
    $stmt->execute();

    //結果変数をバインドします
    $stmt->bind_result($post_title, $guid);

    //値を読み表を作成します
$returnTable = "<table style='width:500px'><th'><td style='text-align:left;'>タイトル</td></th>";
    while ($stmt->fetch()) {
      $a = '<a href=""'. $guid .'" target="_blank">' .$post_title . '</a>';
      $returnTable = $returnTable . '<tr><td>' . $a . '</td></tr>';
    }
	
    //ステートメントを閉じます
    $stmt->close();
    $returnTable .= '</table>';
  } else {
    $error = mysqli_error($link);
    $errno = mysqli_errno($link);
    $returnTable = 'データ取得に失敗しました : ' . $error . ' | ' . $errno;
  }

  $link->close();
  return $returnTable;
}
add_shortcode('call_GetNewPosts10_2', 'shortcode_GetNewPosts10_2');
タイトル
WordPress TwentyTwenty の子テーマの作り方
WordPress Javascriptでバーコード入力処理
WordPress で Javascript を使ってみる
WordPress mysqli の 手続き型 と オブジェクト型
WordPress PHP で文字列を表示する
WordPress MySQLと接続
WordPress の functions.phpについて
WordPress 始めてのPHPコード実行
PHPを始める前に
MySQL データ保存(データバックアップ)

上手く表示されていますか?
どちらでもあまり変わりなくできそうです。
この他に、$wpdb 上でも接続情報を貰っているクラスを利用した方法があります。どれが良いかは私にはまだわかりませんが、$wpdb は単純なデータ操作であれば、一番簡単なようなことが書かれていました。
やってみないと分かりませんが、基礎がわかれば単純なデータ操作であれば、どれでもなんとかなるかと思います。

以上、「mysqli の 手続き型 と オブジェクト型」の違い?説明?でした。

WordPress PHP で文字列を表示する

ここでは簡単な任意の文字列を出力してみます。

WordPress に PHP で単純な文字列を表示する

「これはPHPで文字列を出す学習をしています」と表示させてみましょう。

手順:
1)PHPショートコードを作成
2)ここからPHPショートコードを呼び出す

PHPショートコードですが、次のように書きます。

//単純な文字列を表示するショートコード
function shortcode_simpleText(){
  return 'これはPHPで文字列を出す学習をしています';
}
add_shortcode('call_simpleText', 'shortcode_simpleText');

↓↓↓↓↓ショートコード呼び出し↓↓↓↓↓

これはPHPで文字列を出す学習をしています

↑↑↑↑↑ショートコード呼び出し↑↑↑↑↑

文字を表示するだけならこれだけなのですが。。。
ちなみに、ショートコード呼び出しは下の図のように記述しています。

WordPress にPHPで表を出力してみる

文字列だけではあまりに単純なので、もう少し。
と言うことで、表を表示してみたいと思います。

1 2 3
11 12 13
21 22 23

上のようなテーブルを表示させてみます。

functions.php にショートコードを追加

//単純な表を表示するショートコード
function shortcode_simpleTable(){
  $rturnString = '';
  $count1 = 0;

  $rturnString = "<table border='1' style='width:300px;'>";
  while ($count1 < 30){
    $count2 = 1;
    $rturnString .= "<tr>";
    while ($count2 < 4){
	  $val = $count1 + $count2;
      $rturnString = $rturnString . '<td>' . $val . '</td>';
      $count2++;
    }
    $rturnString .="</tr>";
    $count1 += 10;
  }
  $rturnString .="</table>";
  return $rturnString;
}
add_shortcode('call_simpleTable', 'shortcode_simpleTable');

ショートコード呼び出し

123
111213
212223

上手く表示されているでしょうか?

WordPress MySQLと接続

PHPを使ってMySQLと接続してデータベースを使えるようにします。

今回ここでは正常に接続できるかのみを確認します。

接続のPHPコードは以下の通りです。

//mysql_connectでMySQLに接続
function shortcode_MySQLConnect(){
  global $wpdb;
  $db_user = $wpdb->dbuser;       //データベース接続ユーザーの取得
  $db_passwd = $wpdb->dbpassword; //データベース接続用パスワードの取得
  $db_host = $wpdb->dbhost;       //データベースホストの取得
  $db_dbname = $wpdb->dbname;     //データベース名の取得
	
  $link = mysqli_connect($db_host, $db_user, $db_passwd, $db_dbname);
  if (!$link) {
    return '接続失敗です。'.mysqli_error();
  }

  // データ処理

  mysqli_close($link);
  return '接続成功です ';
}
add_shortcode('call_MySQLConnect', 'shortcode_MySQLConnect');

その前に!

mysqli と mysql

PHPのバージョンで mysqli と mysql ・・・i 付きか付きじゃないか決まります。
PHPのバージョンの人(ver4,5)は mysql を(PHP5.5以降では非推奨)
PHPのバージョンの人(ver5,7)は mysqli を(PHP5以降の人はこちらを)
もし、古いバージョンを使っている人がそのまま学習したい時は気を付けてください。

WordPress MySQL と接続コードの解説

ショートコードの作成方法は前の記事で「始めてのPHPコード実行」で学習しているのでもし不明なら参考にしてください。
MySQLと接続するPHPコードの説明です。

MySQLへの接続情報を取得する

global $wpdb;
$db_user = $wpdb->dbuser; //データベース接続ユーザーの取得
$db_passwd = $wpdb->dbpassword; //データベース接続用パスワードの取得
$db_host = $wpdb->dbhost; //データベースホストの取得
$db_dbname = $wpdb->dbname; //データベース名の取得

wpdbと言うクラスから接続情報を入手しています。
データベースを作成する際に事前に設定する項目ですのでその時に覚えておいても良いですし、設定ファイル wp-config.php で確認しても良いのですが、上の方法が便利です。

まずはMySQLに接続に接続

$link = mysqli_connect('localhost', 'username', 'password', 'dbname');

これは、mysql_connect()と言うMySQLと接続してくれる関数に必要な引数(接続情報)を与えて、MySQLに接続を依頼します。
接続に成功した場合は リンクIDを、失敗した場合にFALSE を返してきます。

引数:host
MySQLサーバーを指定します。
レンタルサーバの場合、MySQLを同じサーバーに立てたり他のサーバーに立てたり、レンタルサーバ会社の自由なので、予めMySQL データベースを作った時に接続サーバーの情報も表示されるはずなので確認しておきましょう。
レンタルサーバのデータベース情報を確認すれば出てきます。

上の方法で良いと思いますが、もしどうしても知りたい場合は、レンタルサーバのWordPressの入れたディレクトリにwp-config.phpと言う名のファイルが有るのでそこでも確認できます。

MySQL 接続情報をwp-config.php から確認する
MySQL 接続情報をwp-config.php から確認する

上の画像の /** MySQL のホスト名 (ほとんどの場合変更する必要はありません。) */ の下の行の define(‘DB_HOST’, ‘*************’);が host 名になります。

引数:username
MySQL の接続可能なユーザー名
これもレンタルサーバでデータベースを作成する際に入力したものを覚えておきましょう。上の wp-config.php ファイルで確認しても良いです。

引数:password
MySQL のユーザー名に設定したパスワード
これもレンタルサーバでデータベースを作成する際に入力したものを覚えておきましょう。上の wp-config.php ファイルで確認しても良いです。

引数:dabname
MySQL に作成したデータベースの名前
これもレンタルサーバでデータベースを作成する際に入力したものを覚えておきましょう。上の wp-config.php ファイルで確認しても良いです。

mysqli_connect(‘localhost’, ‘username’, ‘password’, ‘dbname’) 関数でMySQLに接続するとMySQLからリンク IDと言うデータが返ってきます。PHPプログラムとMySQLが接続されてその識別コードがリンク ID になります。その識別コードのリンク ID を $link と言う変数に格納して、MySQLへのアクセス時に利用します。

次に接続できたか確認

if (!$link) {
    return '接続失敗です。'.mysqli_error();
}

この処理は、ちゃんと接続されたかの判定を行います。正常に接続できなかった場合はメッセージを出力して終了します。

$link(リンクID)には、接続に成功した場合は リンクIDを、失敗した場合にFALSE が格納されているので。if 構文を使って判定しています。この場合、False が入っている時にエラーメッセージを返したいのでif (!$link) としています。「!」が必要ですよ。

良くPHPのプログラムのページで、接続失敗時にdie()関数を使用しています。die()関数は、「メッセージを出力し、現在のスクリプトを終了する」とマニュアルには出ています。WordPressに組み込む際は、その後の処理も考えられるので、私の場合はreturnでエラーメッセージを返しています。実際にはもっと丁寧にエラーメッセージを書く必要があると思いますが、学習用なので問題ないと思います。

接続に成功したら

接続に成功したら、データベースにアクセスして必要な情報を取得して、表示する処理を行います。
今回は接続までの確認ですので、

// データ処理

mysqli_close($link);
return '接続成功です';

で終わりにしています。

WordPress ショートコード呼び出して接続実行

接続成功です

上のようにWordPressの中には call_MySQLConnect とショートコード呼び出しを書いていますが、表示はどのようになっているでしょうか?「接続成功です」と表示されていると良いのですが。

あっ!ショートコードよ呼び出し……になってる。修正は面倒なので直さずに^^;

WordPress の functions.phpについて

functions.phpと聞いて「あっ、あれね」っと思われた方は良いのですが、「??なにそれ?」となる人も居られると思うので、functions.phpについて少し説明を。
詳しくはWordPressのちゃんとした文献を読んで欲しいのですが、そうするといきなりハードルが高くなる(私も読んでるとウーン?となったりする)ので大まかな説明に留めます。

functions.phpとは

functions.phpは、WordPressのカスタマイズが行いやすいようにWordPressに設けられたファイルで、PHPで記述され、各PHP関数やWordPress組み込みの関数を呼び出したり、独自の関数を定義することに利用します。

WordPressのテーマに必須のファイルの1つです。

全てのテーマや記事の前に処理されるので、テーマや記事の初期化ができます。この初期化をする時にショートコードと言う形式で登録しておき、記事からショートコード呼び出しだすことで、記事にPHPコードで処理した内容を表示できるようになります。

このショートコード呼び出しをもう少し詳しく知りたい場合は「WordPress フック」や「WordPress アクションフック」、「WordPress プラグインAPI」などで検索して学習してください。

今回の WordPress PHP入門では、WordPressでPHPを使ってプログラミングが出来るようになることを目標にするので、WordPress周りの仕組みについては割愛します。

functions.phpはどこにあるの?

functions.phpは上にも書いた通り、WordPressのテーマに必須のファイルですので、現在使っているテーマの中に有ります。

私のテーマはTwentyElevenですが、子テーマを使っているため、子テーマの中のfunctions.phpにショートコード形式でPHPコードを設定しています。

もし、この記事を読んでいて子テーマを使っていない人が居るなら、子テーマを使うことを強くお勧めします。子テーマを使わないとテーマの更新が有った時に、せっかくショートコードとして登録したPHPコードがテーマの更新によって上書きされ、消えてしまうのでもう一度ショートコードを設定する必要が出てくるので、とても面倒です。

私も古い記事ですし、Twenty Eleven と古いテーマですが、子テーマを記事にしていますので良ければ参考にしてください。
WordPress Twenty Eleven の子テーマ の作り方
WordPress Twenty Seventeen の子テーマの作り方

脱線してしまいましたが、ファイルはテーマの中に有ります。
レンタルサーバに付いてくるファイルマネージャーなどのレンタルサーバのファイルやディレクトリを見ることができるツールを使って「サイトのroot>wp-content>themes>使用しているテーマまたは子テーマ>functions.php」確認するか、「ダッシュボード>外観>テーマエディター」からfunctions.phpを確認します。

functions.phpを使う時の注意

functions.php はとても重要なファイルのですので、PHPコードを書く際に些細なミスを起こすと、WordPress が真っ白表示されたりします。

ですから、ファイルのバックアップを常に取るように心がけてください。真っ白表示されて、すぐに原因が分からないことも多々あります。その場合は、速やかにバックアップを戻せるようにしておきましょう。

ちなみに、WordPressが真っ白表示で表示されると管理画面にも簡単に行けません。なのでファイルマネージャーなどでバックアップを戻すことが必要になりますので、いざとなって慌て無いようにするためにログイン名やパスワード、使用方法などを事前に確認しておきましょう。

functions.php で良くあるエラー

慣れてくると良く起こすミス
・構文ミス(関数のつづりを確認しましょう)
・無駄な空白、空行を入れてしまい構文ミスに繋がる

初めての時に良く起こすミス
・「UTF-8、BOMなし」以外のファイル形式保存してしまう

functions.php を怖がる必要はありません

functions.php はちょっとしたミスで WordPress を真っ白表示にしてしまいますが、それだけ強力な機能を持ったファイルと言えます。常にファイルのバックアップとリストア(戻す)用意が出来ていれば怖がる必要はありません。
多くの経験を積めばそれだけ落ち着いて作業も出来るようになりますからね。

以上、「WordPress の functions.phpについて」簡単に説明をしました。

WordPress 始めてのPHPコード実行

WordPressでは functions.php に記述したPHPコードをショートコードとして登録し、記事内で登録したショートコード(PHPコード)を呼び出し、実行すことができます。

今回は、ショートコードをfunctions.php に登録し、呼び出し実行するメモを紹介します。

具体的に、日付を表示する下のPHPコードを登録して呼び出します。

date("Y/m/d");

WordPress ショートコードとして登録するには

ダッシュボード>外観>テーマエディターを開きます。
左端にテーマファイルを選択するメニューが表示されているので、テーマのための関数(functions.php)を選択します。
私のテーマはTwenty Eleven です。使っているテーマによってはテーマファイルの表示が異なる可能性が有りますが、いずれにせよfunctions.phpファイルを見つけて選択します。

functions.phpを選択する

下のコードをfunctions.phpにコピペします。
位置はとりあえず一番下であれば問題ないですので、一番下に追記しましょう。

ただし!ファイルの一番下に有る「?>」はPHPコードの最後を括るコードなので、一番下と言っても「?>」の前にコピペします。

//日付を表示するショートコード
function shortcode_date(){
  return date("Y/m/d");
}
add_shortcode('call_date', 'shortcode_date');

念のため私のfunctions.phpに記述した箇所の画像を貼っておきます。

?>の前にコピペする

次はショートコードを呼び出します

下のように記述するだけです。
[]でcall_dateを括って記述します。ブロックエディタの場合、段落に記述します。
段落は下の図で確認してください。

2024/11/04
ショートコードを記述するのは段落

2024/11/04
↑がショートコードを記述した箇所。

ブラウザ上では既に日付が表示されていると思うので、記述している時の画像を貼ります。

実際にショートコードを段落に記述したところ

意外と簡単だったでしょ?

PHPの関数を組み合わせればいろいろ複雑なことができるようになります。
WordPressの関数も必要かと思いますが…それもおいおい。

それかMySQLを利用すれば本格的なプログラムも組めるようになります。
それもおいおい。

以上、「始めてのPHPコード実行」でした。

PHPを始める前に

WordPressでPHPを始めるには最初に少しだけ山が有ります。

WordPressを始めて慣れてきた頃に、「ここが思ったようにならないぁ」と思い始める人も出てくると思います。

自分で思ったように表示をさせるには、それを実現してくれるテーマやプラグインを探し利用するか、WordPressをカスタマイズするためにPHPを利用するかのどちらかになります。

テーマで希望したように表示できれば楽だしそれに越したことがないのですが、少し手の込んだことをしようと思うと、いろいろと思うようにならないことも出てきます。

プラグインを利用する場合は更にプラグインの中に不具合が有ったり、酷い場合はプラグイン経由で WordPress 内部のハッキング等をされているとか、信用のおけないプラグインを使うには注意と勇気が要ります。

PHPを使って WordPress のカスタマイズをするには、PHP の知識と WordPress の構造知識が必要になります。

結果、どれも一長一短があるので自分に合った方法でなんとかするか、諦めるかを選択することになります。

PHP を利用することにした私の学習を紹介を紹介して行きます

PHP を利用するにあたりどの程度の知識が必要になるかは、実現したいことで変わってきます。簡単なことであれば、知識と言うよりもその技術について紹介している記事を検索して組み込むことで可能になります。

私の場合、現在はPHPの学習を全くしていませんが、以下のことをPHPで実現しています。
・ Gogle Analytics Code設定
・ headにAMP自動広告コードを挿入する
・ フッターにAMP自動広告コードを挿入する

どれも見様見真似でなんとかなりました。
PHP のことは知らなくても他のプログラム言語を知っているので、なんとなく理解できることも多かったのですが…。どちらにしても簡単なことであれば、諦めずに数日じっくり取り組めばなんとかなることも多いです。

PHP を利用する上での山は

PHP を利用する上での山は、何と言っても「どこに PHP を記述すればちゃんと表示できるようになるの?」ってことでしょう。

WordPress はホームページ作成ソフトですが、html ファイルをそのまま作成してくれるわけでなく、WordPress で書いた記事は MySQL と言うデータベースに記事内容データのみ保存され、記事URLにアクセスが有った時に WordPress が保存した MySQL から記事内容データのみを取り出し組み立て表示します。

記事内容の文字はHTML 言語で記述された形で保存されます。
記事内容の文字以外のデータとして、写真やビデオやその他いろいろな情報が有りますが、それらの実態はファイルとして保存され、それらを呼び出すための HTML 形式データとして保存します。
WordPress に保存しているデータは、HTML形式のデータかファイルのみとなっています。

上のことを理解できると、「じゃ PHPコードはどこに書けばいいの?」となります。
WordPress の標準エディターとなっているプロックエディターではPHPコードを書いてもHTML 形式データとなるため、PHP コードは実行されずコードが表示されるだけになります。

具体的に、日付を表示するPHPコードは下のように書きます。

<?php echo date("Y/m/d"); ?>

しかし、これをそのまま記述しても、<p><?php echo date(“y/m/d”); ?></p>とHTML のパラグラフタグ<p>で囲まれてしまうため、上のようにそのまま表示されPHPコードとは認識されず、PHPコードは実行されません。

このことをしっかり理解することが、第一の山になります。

では、PHPコードはどこに書けばいいの?

PHPコードは「functions.php」と呼ばれるphpファイルに記述します。
また、PHPでは外部ファイルを参照する方法としてrequire, require_once, include, include_once 関数が用意されていますので、全てを functions.php ファイルに記述する必要はありません。少し凝ったプログラムになる場合は、別ファイルにして見やすく構造化した方が管理しやすいです。

functions.php は利用しているテーマの中のフォルダに入って居ます。
ダッシュボード > 外観 > テーマエディターからも編集ができます。

尚、functions.php はWordPressの根幹のファイルの一つですので、コード記述にミスがあると、いとも簡単にWordPress は表示されなくなります。なので、functions.php の編集を行う際はバックアップを取るなど注意をする必要があります。

functions.php に書けば簡単に表示されるの?

また、functions.php は全ての記事の共通のファイルです。なので、functions.php にPHPコードを書いただけでは全ての記事に反映されてしまうため、うまく機能しているとは言えません。全記事共通のPHPコードなら問題ないのですが……。
なので個別の記事にPHPコードで何かを処理させたいのなら、functions.php内にPHPコードの基本的な使い方の「ショートコード」という形で記述して、該当記事内から登録した任意のショートコード(PHPコード)を呼び出すことでPHPコードを実行させ結果を表示させます。

この「ショートコード」の仕組みは、多くのプラグインでも利用されていますので、使ったことがある人も居ると思います。

まとめると
1)functions.php にショートコードとしてPHPコードを記述する
2)記事の中からショートコードを呼び出す
です。

以上がPHPを利用するための概略です。
そんなに難しくなかったですよね?
次回は私がPHPを学びつつ、具体的な例を挙げて説明していければと思います。

以上、「PHPを始める前に」でした。

投稿一覧に記事閲覧数を表示する WordPress Poplar Post

投稿一覧に記事閲覧数を表示する WordPress Poplar Post

以前に『ページビュー数を確認するプラグイン「 WordPress Popular Posts 」』を紹介しました。
どの記事が良く読まれているか分かるようになりますし、サイトバーにも人気の記事を表示することができます。

今回は同じ WordPress Poplar Post の機能を利用して、投稿一覧に記事閲覧数を表示(追加)します。
記事一覧を見ると全く読まれていない、ほとんど読まれていない記事を確認することができるので、記事の見直しや最新情報に追加するなどテコ入れを行いやすくなります。

投稿一覧に記事閲覧数を表示する方法

WordPress Poplar Post の機能を使います。
WordPress Poplar Post が更新されてカスタマイズが消えないように子テーマの functions.php 内に追加を記述します。
書き方(追加プログラム)は下の通りです。

//投稿一覧に記事閲覧数を表示(追加)する
//WordPressPoplarPostのビュー数を表示するタイトルを作る
function my_posts_columns($columns) {
    $columns['pv_num'] = "ビュー";
    return $columns;
}
//各記事のビュー数の追加する
function add_my_posts_column($column_name, $post_id) {
    if( $column_name == 'pv_num' ) {
        echo wpp_get_views($post_id, 'monthly', true);//←ここの値で集計期間変更dailyとかweekly全部の場合はall
    }
}
if ( function_exists('wpp_get_views') ) {
    add_filter( 'manage_posts_columns', 'my_posts_columns' );
    add_action( 'manage_posts_custom_column', 'add_my_posts_column', 10, 2 );
}

投稿一覧に記事閲覧数を表示する方法の解説

投稿一覧の項目の追加・削除・並び替えは、「manage_posts_columns」というフィルターフックを使用して行います。
今回は一番後ろに追加すれば良いだけなので、「manage_posts_columns」フィルターフックの返り値である「$columns」に「”pv_num”、”ビュー”」を追加しました。
表示名称の変更は「ビュー数」や「PV数」など好みで変更してください。

また、並びを変更したい場合は「$columns」をごそっと変更しても構いません。
タイトルの次にビュー数を表示したい時などは以下のようにします。

 $columns = array(
    'cb'         => '<input type="checkbox" />',
    'title'      => 'タイトル',
    'pv_num'     => 'ビュー',
    'author'     => '作成者',
    'categories' => 'カテゴリー',
    'tags'       => 'タグ',
    'comments'   => '<div class="comment-grey-bubble" title="コメント"></div>',
    'date'       => '日時'
  );
  return $columns;

「manage_posts_custom_column」アクションフックで記事毎にPV数を表示させます。
wpp_get_views() は指定した投稿IDのPV数を取得する関数。

第1引数:投稿ID
第2引数:PV集計期間(daily, weekly, monthly, all から選べます)
第3引数:PV数をカンマで区切るかどうか

以上、「投稿一覧に記事閲覧数を表示する WordPress Poplar Post」のご紹介でした。