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 Javascriptでバーコード入力処理
WordPress で Javascript を使ってみる
WordPress mysqli の 手続き型 と オブジェクト型
WordPress PHP で文字列を表示する
WordPress MySQLと接続
WordPress の functions.phpについて
WordPress 始めてのPHPコード実行
PHPを始める前に
MySQL データ保存(データバックアップ)
SyntaxHighlighter Evolved

上手く表示されていますか?
ちょっと複雑になってしまいましたが、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 Javascriptでバーコード入力処理
WordPress で Javascript を使ってみる
WordPress mysqli の 手続き型 と オブジェクト型
WordPress PHP で文字列を表示する
WordPress MySQLと接続
WordPress の functions.phpについて
WordPress 始めてのPHPコード実行
PHPを始める前に
MySQL データ保存(データバックアップ)
SyntaxHighlighter Evolved

上手く表示されていますか?
どちらでもあまり変わりなくできそうです。
この他に、$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を括って記述します。ブロックエディタの場合、段落に記述します。
段落は下の図で確認してください。

2020/06/07
ショートコードを記述するのは段落

2020/06/07
↑がショートコードを記述した箇所。

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

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

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

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」のご紹介でした。

Google Adsense AMP自動広告の簡単な設定方法

Google Adsense AMP自動広告の簡単な設定方法

 

今回もGoogle Adsense 関連の話です。
前回は「Google Adsense 自動広告の簡単な設定方法」をご紹介しました。

このページをご覧になっておられる方は、すでにAMPやGoogle Adsense については一通りの知識を持っていると思いますが、AMP について少しだけご説明します。

 

AMP とは?

AMPは「Accelerated Mobile Pages」という、Googleが推進しているモバイルページを高速に表示させるための手法のことで、AMP を導入することでスマートフォンに高速表示を行えます。
そのことからスマートフォンで Google 検索(yahooもGoogleエンジンを使っています)を行うと、AMP 対応したページの優先順位が上がります。
本Webサイトも AMP 対応しています。

AMP 対応で検索表示順位が上がることは良いのですが、デメリットもあります。
AMP は高速化を行うために独自仕様に沿ってコーディングを行う必要があります。
WordPressの場合はプラグインでかなりの部分を自動対応してくれるので助かります。

で、プラグインの自動処理で作られたAMP用HTMLファイル等は、既存のGoogle Adsense 広告が入らない仕組みになっています。
そのうち自動で入るようになるかも知れませんが、少なくとも現在では広告が入りません。

ノーマルページとAMP ページは個別に広告を入れる必要があります。
前回はノーマルページに手間をかけずにGoogle Adsense 広告が表示される、簡単な設定方法を紹介しました。
今回は AMP ページに手間をかけずにGoogle Adsense 広告が表示される、簡単な設定方法を紹介します。

ちなみに既に Google Adsense にWebサイト登録を行っていると思いますが、登録していないようなら登録しておいてください。

 

Google Adsense AMP 自動広告とは?

まず、Google Adsense 自動広告とは、スクリプトと広告用のクライアントコードの2つを設置するだけで、後はGoogle にお任せで見ている方に合わせた広告が表示される仕組みの広告です。

自動広告機能がリリースされる以前は、プラグインを使うにしろ、自分でコードを設置するにしろ、面倒な手順を踏む必要がありました。
素人にはかなり難易度の高く、煩雑な作業でした。

自動広告ができるようになって、非常に楽にGoogle Adsense が利用できるので、気楽に試すことが出来るようになっています。

AMP 自動広告はAMP 用の自動広告を表示するためのものです。
AMP 対応ページには、AMP 自動広告を設定することで見ている方に合わせた広告が表示されるようになります。

 

AMP 自動広告の簡単な設定方法

簡単と書きましたが、子テーマは使います。
子テーマの設定は WordPress の基本ですので、是非ともこの際に利用してみてください。

ちなみに、私も以前子テーマの設定方法をご紹介しているので参考にしてくだい。
WordPress TwentySeventeenの子テーマの作り方
WordPress TwentyEleven の 子テーマ の作り方

 

自動広告の簡単な設定方法は、functions.php に下のコードを貼り付けるだけです。

//headにamp-auto-ads-JSを挿入する
add_action( 'amp_post_template_head', 'my_amp_add_tag_adsense_js' );
function my_amp_add_tag_adsense_js() {
?>
<!-- amp-auto-ads-JS -->
    <script async custom-element="amp-auto-ads"
        src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
    </script>
<?php
}
//フッターにAMP自動広告コードを挿入する
add_action( 'amp_post_template_footer', 'my_amp_add_tag_adsense' );
function my_amp_add_tag_adsense() {
?>
<!-- AMP自動広告 -->
    <amp-auto-ads type="adsense"
        data-ad-client="ca-pub-xxxxxxxxxxxxxxxx">
    </amp-auto-ads>
<?php
}

 

AMP 自動広告の簡単な設定の解説

//headにamp-auto-ads-JSを挿入する
add_action( ‘amp_post_template_head’, ‘my_amp_add_tag_adsense_js’ );
WordPress の AMP head 部の処理イベント時(’amp_post_template_head)に、my_amp_add_tag_adsense_js と言う関数の実行を設定
「このスクリプトをコピーして、AMP HTML の head タグ内に貼り付けます」とありますので head 部に挿入します。

function my_amp_add_tag_adsense_js () {
?>
<script
・・・・
</script>
<?php }

 my_amp_add_tag_adsense_js関数の設定。中身はGoogle Adsense から取得したコードをそのまま貼り付けます。

//フッターにAMP自動広告コードを挿入する
add_action( ‘amp_post_template_footer’, ‘my_amp_add_tag_adsense’ );
WordPress の AMP footer 部の処理イベント時(’amp_post_template_footer)に、my_amp_add_tag_adsenseと言う関数の実行を設定
「この広告コードをコピーして、AMP HTML の本文に貼り付けます」とありますので footer 部の後ろに挿入しました。
本文内ならどこでも良いのですが、footer 部の後ろに挿入が簡単なのでそうしました。

function my_amp_add_tag_adsense () {
?>
<script
・・・・
</script>
<?php }

 my_amp_add_tag_adsense関数の設定。中身はGoogle Adsense から取得したコードをそのまま貼り付けます。

Google Adsense からコードを取得する

amp-auto-ads-JSコードを取得する
Google Adsense を開き、[コンテンツ]>[自動広告]>[AMP自動広告]>[手順2]をクリックします。
コードが表示されますのでコードをコピーします。
Google Adsense AMP 自動広告 手順2
AMP自動広告コードを取得する
Google Adsense を開き、[コンテンツ]>[自動広告]>[AMP自動広告]>[手順3]をクリックします。
コードが表示されますのでコードをコピーします
Google Adsense AMP 自動広告 手順3

最後に

手順 1: テキスト広告とディスプレイ広告のフォーマットをオンにします
通常、AMP 自動広告をオンにして、スクリプトとコードを追加してから 20 分後に広告が表示されます

Google Adsense AMP 自動広告 手順1

AMP の設定と Google Adsense 自動広告の簡単な設定方法が設置できていれば、数分で完了する作業です。
広告の表示はすぐには確認できませんが、AMP テストで正しくコードが挿入されているかをソース表示で確認できます。

ちなみに広告表示する価値もないページは表示されないと聞いたこともあります。。。

以上、「Google Adsense AMP自動広告の簡単な設定方法」のご紹介でした。