WordPressで外部DBから情報を取得して表示するPHPショートコードの作成

外部DBから情報を取得して表示した方法についてまとめます。

PHPのショートコードを作成し、そこで外部DBから情報を取得する方法です。

 

実際に私が作成した画面をイメージとして、その処理の概要とショートコードの作成方法について記載して残そうと思います。

同じような事をしたいと考えている人の参考になれば幸いです。

目次の通り進めていきます。

完成画面イメージ

CONTENTSとしても公開しているサイトになります。

 

以下のように日付とテーブルを開いた時点の最新情報を出すようにしています。

ショートコードに表示したい情報を渡すだけで、東証1部なども出せるようにしておきました。

 

 

まずは大まかに表示されるまでの処理の概要を説明します。

表示されるまでの処理の概要について

HOMEに表示されるまでの処理の概要を説明します。

この処理の概要は、HOMEに表示されるものだけに限りますので、ほかの情報表示のために行っていることには触れません。

大まかな処理概要

①.Pythonによる情報クロールによって、情報を収集しチェックや整形などを行う

②.取得した情報を HTML の Table 形式に生成し、そのまま HTML の文字列を DB に格納する

③.サイトにアクセスされHOMEが開かれたら、そのTable 形式の文字列を DB から取得し表示する

 

ものすごく雑に書くとこのような感じです。

HTML形式で保存した理由としては、少しでもPHPでの処理を減らす開く時間を早くするためです。

SQLに格納したHTML文字列

SQLのカラムは、想定される文字列長に合わせた文字列カラムに設定すればOKです。

 

実際に以下のように格納してます。

class 名を付けておけば、あとでCSS変えるだけで色々とスタイルを変えれます。

<table cellpadding="0" cellspacing="0" border="0" class="tableClass mothors">
<thead>
<tr class="trClass">
<th>#</th>
<th>コード</th>
(…略…)
</tr>
</thead>
<tbody>
<tr class="trClass">
<td class="rank">1</td>
<td class="code">9999</td>
(…略…)
</tr>
</tbody>
</table>

以上が、大まかな処理の概要となります。

次はPHPで作成するショートコードの作成方法を記載します。

PHPショートコード作成

私はCocoonを使用しているので、Wordpressのメニューから「外観」→「テーマエディター」を選びテーマに処理を追加できる画面にいきます。

今回はショートコードの作成なので、functions.php に処理を追加することになります。

PHPショートコードのサンプルコード

コメントは、この記事で説明するために追記したものになります。

実際にHTMLのタグと組み合わせて、表示するものを作成できますが、今回は HTML 形式で作ったものを呼び出すだけという設計にしたので、そのような記載をしていません。

 

読み込んだ情報を出すだけなので、自己完結型のショートコードにしました。

// ショートコードの作成
// ショートコード名と function 名 を指定
add_shortcode('home_category', 'get_home_category');

// get_home_categoryがない時だけ作成するようにする
if (!function_exists('get_home_category')):
    // ※1.自己完結型と囲み型について(今回は自己完結型)
    function get_home_category($atts) {
        // ショートコードの引数のデフォルト値を設定
        extract(shortcode_atts(array('typeno' => '1',), $atts));
        ob_start();

        global $wpdb;
        // 接続したいDBの情報を記載する。
        $other_wpdb = new wpdb('DBのUSER_ID', 'DBのPASSWORD', 'DB名', 'DBのIPアドレス');

        // 条件を指定したSQL文
        // ※2.SQLの取得についての詳細
        $results = $other_wpdb->get_results($wpdb->prepare(
            "SELECT カラム1, カラム2 FROM テーブル名 WHERE 条件type = %s ORDER BY id DESC LIMIT 1",  $atts['typeno']));

        // 取得した情報をすべて表示する。HTMLで保存していない場合は、このFor文の中でHTMLタグと一緒に書いていく。
        // 私の場合は、Limit 1 で指定してあるので、回す必要ないけどサンプルとして for にしておいた。
        foreach($results as $row) {
            // 表示する
            echo $row->カラム2;
            echo $row->カラム1;
        }

        // DB をクローズ。DB使い終わったら、どの言語でも close しておきましょう。余計な問題を生まなくてすみます。
        $other_wpdb->close();
        return ob_get_clean();
    }
endif;

これだけで実現できます。

※1.自己完結型と囲み型について

ショートコードで囲んだ値に影響を及ぼす囲み型と、それだけで意味を成す自己完結型の2種類のショートコードがあるようです。

私が書くよりわかりやすいサイトがあったので、そちらをご参照ください。

外部リンク:囲み型

外部リンク:自己完結型

※2.SQLの取得についての詳細

SQLの関数に特化した記事はこちら

ショートコードの使用

使用する部分では、ここで作ったショートコードを使用するだけで表示されるということです。

[home_category typeno=1]

とするだけでも、よいですが今回はスクロールだすために、以下のようにクラス名を付けた div で囲みショートコードを追加しました。

<div class="cate1class">[home_category typeno=1]</div>

これでCSSをいじれば、テーブルにスクロールが表示されるようになります。

/* 縦スクロール */
.category {
  height: 730px;
  overflow-y: scroll;
}

他には、Tableの各タグにClassを用意してあるので好きなようにCSSでスタイルを変更すればおしまいです。

まとめ

今回、色々と調べながら作ってみましたが、思ったより簡単に作ることができました。

WordPressと外部DBの連携が、容易くできるのであれば他にもアイディア次第で色々とサイト作れるなぁと感じました。

 

HTMLを保存し、そのまま表示することができるのを知れたのは大きな成果でした。

 

 

 


読んで頂き、ありがとうございます。
この記事が誰かにとって、一つの参考となれば幸いです。

新たな知識や技術を習得し続けていきたいです。

 

 

 

コメント