タグ: #WordPress

WordPress 処理解析 ～ログイン処理を調べる～

WordPressのダッシュボードへのログインする処理を調査して、自作するログイン処理に応用(連携)できないか検討します。

WPのログイン処理

WordPressのログイン処理はURL/wp-adminを指定した時に表示されるので。。。眺めるファイルは/wp-admin/index.phpファイルになります。
というわけで早速。。。そして、参考にするサイトはWordPressのドキュメントサイトです。

コードを眺める

参照するファイルは/wp-admin/index.phpです。頭から眺めます。

/**
 * Dashboard Administration Screen
 *
 * @package WordPress
 * @subpackage Administration
 */

/** Load WordPress Bootstrap */
require_once( dirname( __FILE__ ) . '/admin.php' );

/** Load WordPress dashboard API */
require_once( ABSPATH . 'wp-admin/includes/dashboard.php' );

wp_dashboard_setup();

wp_enqueue_script( 'dashboard' );

上のrequire_once()はファイルを読み込むということなので「なるほど！」となるけど、wp_dashboard_setupとwp_enqueue_scriptはそういきませんので調べることにします。

wp_dashboard_setup()

このWorPress関数(テンプレート)はダッシュボードのセットアップを行うようで、ここに関連する処理(ライブラリ(API))でダッシュボードのカスタムができるようです。

wp_enqueue_script()

こちらは説明書きがあったのでそれを眺めると。。。

スクリプトファイルがまだインクルードされていない場合、また、すべての依存するスクリプトが登録済みの場合、依存関係に従った適切なタイミングでファイルを生成されたページにリンクします。スクリプトのリンクは、wp_register_script() 関数ですでに登録済みのハンドル、またはこの関数に必要なパラメータを与えることで行えます。
これは WordPress が生成するページに JavaScript をリンクする際に推奨されている方法です。

そして、実際にあるコードは下のようになっているので
wp_enqueue_script( 'dashboard' );説明とコードからして、下のファルダにあるJSファイルを読み込んでいるだろうと予測します。
予測したら、それを確認します。



dashboad.jsを発見することができました。

ログイン処理はどこに？

横道に逸れましたが、ログイン処理はどこにいるのでしょうか？
確かにログインの画面は/wp-admin/で表示させていました。
どうやらログイン処理部分を通り過ぎてしまったようです。
なので初めのrequire_onceのとこまで戻り、読み込んでいるファイルを眺めます。

admin.phpを眺める

今までは、丁寧に眺めてきましたが、Login部分を見つけたいので、かっ飛ばして眺めます。
require_once( dirname( dirname( FILE ) ) . '/wp-load.php' );
このコードより、/wp-load.phpを眺めてもloginが見つからないので飛ばします。。。そして、インターネットで調べたほうが早そうなので、そうすると。。。このサイトでは、functions.phpを編集する方法でログイン画面をカスタムする方法を記載していました。

結論

ダッシュボード、ログイン画面共にベースになるファイルは発見することができたので、これをベースにカスタムすれば良いということがわかりましたが、当然、テーマを変更すると作成したファイルが参照されなくなるので。。。ファイルの配置場所は考える必要があります。
しかし、これで

自作のログイン画面からログインした場合は、自作のダッシュボード画面へ遷移する

というような処理を実装してみるのも良いかと思いました。

でわでわ。。。


関連ページ

  1. PHP PDO 〜MySQLにアクセスする〜
  2. PHP Ajax 〜DBに登録したデータを受信する〜
  3. Google Maps API PHP連携 〜マップ情報をDBに登録する〜
  4. PHP Image File 〜iPhoneやAndroidでの画像送受信の問題〜
  5. AngularJS Routing 〜PHPをWeb APIにする〜
  6. WordPress PHPカスタム〜根本的に見た目を変える〜
  7. WordPress PHPカスタム〜根本的に見た目を変える2〜
  8. Eclipse PHPプラグイン 〜ElipseでWordPress環境を構築〜
  9. WordPress テスト実装 〜heade-test.phpを表示〜
  10. AngularJS + PHP 〜WordPressと連携する〜
  11. AngularJS + PHP 〜AngularJSの実装〜
  12. AngularJS + PHP 〜AngularJSの実装2〜
  13. WordPress 処理解析 ～index.phpを眺める～


WordPress 処理解析 ～index.phpを眺める～

WordPressにログイン機能を追加して自サイトでのWebサービスを作成しようと考えています。

しかしながら、WordPressの中身に関してほぼ理解していないので調べようと思いました。

WordPress解析

現段階でわかっているのは以下のようなことです。1. 「テーマ」でブログ表示アプリケーションが動いている

  1. テーマフォルダ内のindex.phpがメイン処理を行う
  2. phpはHTMLを出力する
  3. DBはMySQLを使用している

これ以外はわかっていません。

どこから着手？

まずはメイン処理のindex.phpから解析していきます、使用しているのはtwentyseventeenというテーマです。なので以下のフォルダにあるindex.phpを眺めます。フルパスです。
/wp-content/themes/twentyseventeen/index.php

ヘッダ部分の解析

このメソッドで、ヘッダー部分のphpを読み込みます。調査で参照するサイトはWordPressのサイトです。
説明書きには以下のような内容が記載されていました。

現在のテーマディレクトリの header.php テンプレートファイルを読み込みます。名前（name）を指定すると、指定したヘッダー header-{name}.php を読み込みます。

つまり、下のようにファイルを配置した時に、get_header()というコードは「header.php」を読み込みます。
そして、get_header('test')というコードは「header-test.php」を読み込みます。

実際のコード(header.php)

/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

get_header('test'); ?>

これはindex.phpの初めの部分で、ヘッダー(header.php)を表示する処理です。

そして、以下のコード(HTML)が続きます。

<div class="wrap">
    <?php if ( is_home() /*&& ! is_front_page()*/ ) : ?>
        <header class="page-header">
            <h1 class="page-title"><?php single_post_title(); ?></h1>
        </header>
    <?php else : ?>
    <header class="page-header">
        <h2 class="page-title"><?php _e( 'Posts', 'twentyseventeen' ); ?></h2>
    </header>
    <?php endif; ?>

このコードは、画面(HTML)のヘッダ<header>部分を出力する処理が混ざったPHPコードで、HTML文書の中(間)にPHPでの処理結果をHTMLとして出力します。
上のコードのif〜esle〜endifの部分は各条件に合う部分をHTMLに出力します。

画面のメインコンテンツ部の解析

そして画面(HTML)のメイン部分を出力するのが下のコードです。

   <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

            <?php
            if ( have_posts() ) :

                /* Start the Loop */
                while ( have_posts() ) : the_post();

                    /*
                     * Include the Post-Format-specific template for the content.
                     * If you want to override this in a child theme, then include a file
                     * called content-___.php (where ___ is the Post Format name) and that will be used instead.
                     */
                    get_template_part( 'template-parts/post/content', get_post_format() );

                endwhile;

                the_posts_pagination( array(
                    'prev_text' => twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '<span class="screen-reader-text">' . __( 'Previous page', 'twentyseventeen' ) . '</span>',
                    'next_text' => '<span class="screen-reader-text">' . __( 'Next page', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ),
                    'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyseventeen' ) . ' </span>',
                ) );

            else :

                get_template_part( 'template-parts/post/content', 'none' );

            endif;
            ?>
        </main><!-- #main -->
    </div><!-- #primary -->

そして、曲者になるコードがget_template_partとget_post_formatです。

get_template_part

参考サイトには下のような説明があります。

テンプレートパーツ（ヘッダー、サイドバー、フッターを除きます）をテンプレートへ読み込みます。これにより、テーマがコードのセクションを再利用すること、また子テーマが親テーマのセクションを置き換えることが容易になります。
テーマの $slug で指定したテンプレートパーツをインクルードします。$name が指定された場合は、そのパーツの個別版をインクルードします。テーマに {$slug}.php ファイルがなければ何もインクルードしません。
$name パラメータの値は、例えばファイル "{slug}-special.php" をインクルードしたければ "special" にします。

上で呼ばれている処理は以下のような形で呼ばれています。
get_template_part( $slug, $name );
なので、上の説明にある以下の部分がこのコードの説明部分になります。

テーマの $slug で指定したテンプレートパーツをインクルードします。$name が指定された場合は、そのパーツの個別版をインクルードします。テーマに {$slug}.php ファイルがなければ何もインクルードしません。
$name パラメータの値は、例えばファイル "{slug}-special.php" をインクルードしたければ "special" にします。

呼び出し部分はget_template_part( 'template-parts/post/content', get_post_format() );
そして、テーマフォルダ(template-parts/post/content)を見てみると。。。

content.phpというファイルがあります。これが読み込まれているであろう。と目星をつけます。
※はっきりさせるときはこのファイルの中身を見ます。が、これは実装する時に眺めようかと思います。(あてになりませんが(笑))

そして、get_post_format()の部分ですが、これも参考サイトを参照します。

投稿記事の投稿フォーマットを返します。 これは通常ループ内で呼び出されますが、投稿IDが提供されていれば、どこでも使うことができます。

ちなみに、上のこーどでは引数がありませんので、さらに下のある説明

のように引数なし＝初期値 →「現在のループ記事」つまりは、「the_post」などで取得できる記事の投稿フォーマットということになります。
フォーマットの種類は以下の通り。

aside
chat
gallery
link
image
quote
status
video
audio

ちょっと長くなったのでここら辺で失礼いたします。

でわでわ。。。



WordPress Plugin NewStatPress ～アクセス解析プラグインAPIを使う～

NewStatPressというWPプラグインを使用しています。
しかし、あまりその恩恵には預かっていません。。。
ちょいと(心に)余裕ができたので調べてみました。

NewStatPress API

アクセス解析を行おうとしたときには「統計や数学的な知識」が求められると思いますが、そのまえに、データを取得できないと学習も何もないのでデータの取得を先にやってしまおうと思います。
詳細に関しては、下の手順でページをご覧ください。

  1. 自分のダッシュボードにアクセス。
  2. 左のサイドバーNewStatPressをクリック
  3. NewStatPress Settingsをクリック
  4. APIタブをクリック
  5. 「Full documentation (PDF)」をクリック

そうするとドキュメントのPDFがみれるのでそれを参照して、APIの使い方を理解します。

APIというのは？

早い話が、リクエストを飛ばすと情報が手に入るというとこです。

[site]/wp-content/plugins/newstatpress/includes/api/external.phpにリクエストを飛ばし、レスポンスを取得する

こういうことです。
パラメータは、以下の通り

・VAR the variable for the query (like 'Version')
・ KEY the MD5 of date at minute level plus the key you enter into option
(e.g in PHP: md5(gmdate('m-d-y H i').key) )
・ PAR the parameter associated with the VAR
・ TYP the type of result: JSON (default) of HTML

あとは実際に実行してみるのが一番ですが、「どーやるか？」という部分に関して
PHPなどのプログラムを使用してPOSTリクエストを送信するひつようがあるようで。。。

実装に関してはまたの機会に(気が向けば)やろうと思います。

でわでわ。。。


関連ページ

  1. PHP PDO 〜MySQLにアクセスする〜
  2. PHP Ajax 〜DBに登録したデータを受信する〜
  3. Google Maps API PHP連携 〜マップ情報をDBに登録する〜
  4. PHP Image File 〜iPhoneやAndroidでの画像送受信の問題〜
  5. AngularJS Routing 〜PHPをWeb APIにする〜
  6. WordPress PHPカスタム〜根本的に見た目を変える〜
  7. WordPress PHPカスタム〜根本的に見た目を変える2〜
  8. Eclipse PHPプラグイン 〜ElipseでWordPress環境を構築〜
  9. WordPress テスト実装 〜heade-test.phpを表示〜
  10. AngularJS + PHP 〜WordPressと連携する〜
  11. AngularJS + PHP 〜AngularJSの実装〜
  12. AngularJS + PHP 〜AngularJSの実装2〜
  13. WordPress 処理解析 ～index.phpを眺める～

AngularJS + PHP 〜AngularJSの実装2〜

AngularJSで横スクロールメニューの実装ができましたので、今度はメニュー選択をしたら、それを画面に表示する実装を行います。

AngularJSの実装2

実現したい操作は下の通りです。

  1. 横スクロールメニューをクリックする
  2. 選択したメニューにひもづく記事一覧を取得
    3, 記事一覧の書く記事のタイトル部分をクリックすることで対象の記事を開く(window.open())

以上のような実装を行いたいと思います。

現状の問題1

横スクロールの定義がルートコントローラーにしてあるので、再度コントローラーを起動すると横スクロールメニューがクリア(初期化)されてしまう。。。

これに関しては、ルートコントローラーの呼び出しを行なっても、子供コントローラーを呼び出すように実装することで回避しました。

対象方法

横スクロールメニューをクリックすると「changeView()」を呼び出すように実装していますが、これを使用して$scopeの値を変更すると横スクロールメニューがクリアされてしまうので、直接子供の画面(<div ng-view></div>で表示する画面)のコントローラーを起動するように実装しました。
＜実装＞
イベント処理の通知、受信を行うように関連付けを行いました。処理を通知(親画面から子画面)

// pgbox.js: 画面上の処理(通知もと)
$scope.changeView = function (catId) {
   $scope.$broadcast('getCategoryPosts', catId);
};

からこ画面のコントローラー(siteMapCtrl.js)へイベントの通知を受け取る

/** サイトマップの表示部分コントローラー */
app.controller('siteMapCtrl',['$scope', 'SiteMapService', function($scope, SiteMapService){
    $scope.title = "Hello";
    const service = SiteMapService;
    $scope.$on('getCategoryPosts', function(event, catId, SiteMapService) {
        alert("testOn");
        service.getCategoryPosts(catId).then(function(response, status, headers, config){
          $scope.categories = response.data;
        }), function(data, status, headers, config) {
          alert(data);
        };
    });
}]);

上のコントローラー内で、$scope.$on('getCategoryPosts', function(event, catId) {のように"getCategoryPosts"イベントの通知を受け取ったときに処理が動くように定義しておきます。
こうすると、$bloadcastで通知されたイベントを受け取れます。
ちなみに、逆方向の処理を行うときは"emit()"を使用するようです。実装する機会があったら記載しますが、この実装はあまり多用しない方が良いように思います。
なぜかというと「どこからどこへ・・・」というのがソース上でしかわからないからです。あまり複雑になるようであれば、何かしらのマッピングを行わないと「意味わからねぇ！」となります。(その人にしかわからないコードは危険です。)

とりあえずは、ここまで実装しました。
現状のソースはGithubにアップロード(差分表示)してあります。

でわでわ。。。



AngularJS + PHP 〜AngularJSの実装〜

前回はWordPressとAngularJSを連携してサイトマップの作成をする計画(設計プラン)を作りましたので、今回はクライアント部分、AngularJSでの実装及び、サーバーサイドへのアクセス方法に関して記載したいと思います。

AngularJSの実装

実装したい要件は以下の通りです。

  1. 初期表示時に、サイトマップの画面を表示する(他の画面も表示できるように作成)
  2. ヘッダー部分に横スクロールメニュー(サイトマップ用)を表示する(WordPress連携部分)
  3. カテゴリ選択した時に対象カテゴリの記事一覧(タイトルと説明(できれば)と画面表示するURL)を表示する

上のような要件を満たすように実装したいと思います。

大まかなフレームワーク

「フレームワーク」と言ってもAngularJSなどのようなフレームワークではなく、「処理の概要」という意味での処理フローです。
具体的には。。。

初期表示

土台にするHTMLファイルにAngularJSの機能を埋め込みます。(土台にするHTMLはBootStrapのテーマです。)

ファイル構成はGithubにアップしてあるのでそちらを参照ください。
まずは「index.html」です。
このHTMLファイルを下のように(一部)編集してやります。

<body ng-app= "pgBoxAG" class="bg-light"  ng-controller="pgboxCtrl">

こうすることでAngularJSの下のコード部分が、モジュールとして機能するようにバインド(関連付け)されます。

/project/config.js

let app = angular.module('pgBoxAG', ['ngRoute']);

このコードは「pgBoxAG」トイウモジュールを作成します。という意味です。index.htmlには下のように、自作するJSファイルの中では下の順番で読まれるように実装しています。

    <!-- PGボックス(上から順に読み込む) -->
    <script src="./project/dataConst.js"></script>
    <script src="./project/config.js"></script>
    <script src="./project/services/service-config.js"></script>
    <script src="./project/pgbox.js"></script>
    <script src="./project/siteMapCtrl.js"></script>
< JSファイルの概要>

A.dataConst.jsには定数などの定義がしてあります。
B.config.jsには各モジュール(コントローラーとファクトリ)
C.pgbox.jsにはルートコントローラー
D.siteMapCtrl.jsにはサイトマップ用の各処理(サイトマップコントローラー)を実装しています。

WordPress連携

今夏のWordPress連携部分はヘッダー部分の横スクロールメニューの項目表示です。
大まかな処理としては下のように実装しています。

  1. pgbox.jsにあるコントローラーでSiteMapService（/project/service/（/project/service/serviceーconfig.js)を呼び出し、WordPressにある、カテゴリ一覧を取得する
  2. SitemapServiceからPHPファイルへリクエストを飛ばし返却値'(JSON)を取得して値を返却する
  3. PHPファイル(getCategories.php)でWordPressの部品を使用するための「おまじない」を使用してWordPressテンプレート(関数)を使用できるようにする。→require_once( $_SERVER['DOCUMENT_ROOT'] . '/wp/wp-load.php' );
  4. カテゴリ一覧を取得、JSONに変換してクライアント側に値を返却

というような処理を実装しました。

現段階(2020-01-05)では、横スクロールメニューからのカテゴリ毎の記事一覧が表示できない状態です(BootStrapテーマファイルがそのまま残っています。)

とりあえずは、こんな状態です。まだまだ実装は続きます。

でわでわ。。。