リンクをカードにするプラグインを作ろう！(7)スタイルシートを設定する

PHP
2018.08.19
この記事は約5分で読めます。

スタイルシートを設定してブログカードっぽい見た目にします。

前回まで

文字コードをUTF-8にしました。

ぽぽづれ。
 
2018.08.18
リンクをカードにするプラグインを作ろう！(6)文字コードを変換する
https://popozure.info/20180818/13278
上手くタイトルと概要文が取れないサイトの対応をします。前回までOGPが設定されていないサイトのタイトルと概要文を取得しました。UTF-8以外の文字コードのサイト文字コードがUTF-8以外の場合、正しく文字を扱うことが出来ず、タイトルや概要文が取得できません。UTF-8に文字コードを変換すると上手く扱うことが出来ます。文字コードがEUC-JPのサイト←サイト名称←タイトルhttps://www.4gamer.net/←URL←概要文文字コードがシフトJISのサイト←サイト名称←タイトルhttps://nttxstore.jp/←URL←概要文コードを書いていく文字コードを変換す...

スタイルシートのファイルを用意する

ファイルを作成する

プラグインと同じディレクトリに「style.css」という名前でファイルを用意します。

スタイルシートを記述する

こんな感じにしてみました。

文字コードは「UTF-8」です。

.popo_bc_wrap {
    margin: 16px;
    padding: 8px;
    width: 96%;
    border: 2px solid #8888ff;
    background-color: #ffffff;
    border-radius: 3px;
}
.popo_bc_link {
    text-decoration: none;
}
.popo_bc_site_name {
    display: block;
    font-size: 12px;
}
.popo_bc_title {
    display: block;
    font-size: 18px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.popo_bc_url {
    display: block;
    font-size: 12px;
    color: #00f;
    text-decoration: underline;
}
.popo_bc_excerpt {
    height: 32px;
    font-size: 12px;
    color: #444;
    overflow: hidden;
    text-overflow: ellipsis;
}

スタイルシートを呼び出す

スタイルシートを呼び出す記述をします。

フックを設定する

スクリプト等を呼び出す「wp_enqueue_scripts」というタイミングで「enqueue」を呼び出すように記述します。

    function __construct() {
        add_shortcode('blogcard', array($this, 'shortcode' ) );
        add_action('wp_enqueue_scripts', array($this, 'enqueue' ) );
    }

呼ばれる関数を記述する

「wp_enqueue_scripts」というタイミングで呼ばれる関数を記述します。

        curl_close($ch );
        $html = '<DIV class="popo_bc_site_name">'.$site_name.'</DIV><DIV>'.$title.'</DIV><DIV>'.$url.'</DIV><DIV>'.$excerpt.'</DIV>';
        return $html;
    }
    function enqueue() {
    }
}
$popo_blogcard = new popo_blogcard;

呼ばれる関数を記述する

プラグインと同じディレクトリにあるスタイルシートのファイル「style.css」が呼び出されるように記述します。

        curl_close($ch );
        $html = '<DIV class="popo_bc_site_name">'.$site_name.'</DIV><DIV>'.$title.'</DIV><DIV>'.$url.'</DIV><DIV>'.$excerpt.'</DIV>';
        return $html;
    }
    function enqueue() {
        wp_enqueue_style('popo-blogcard', plugin_dir_url(__FILE__).'style.css');
    }
}
$popo_blogcard = new popo_blogcard;

スタイルシートに合わせてHTMLを直す

こんな感じの構造にしました。

popo_blogcard

popo_bc_wrap

popo_bc_site_name
popo_bc_site_content

popo_bc_title
popo_bc_url
popo_bc_excerpt 
        curl_close($ch );
        $html = '<DIV class="popo_blogcard"><A href="'.$url.'" target="_blank" class="popo_bc_link"><DIV class="popo_bc_wrap"><DIV class="popo_bc_site_name">'.$site_name.'</DIV><DIV class="popo_bc_content"><DIV class="popo_bc_title">'.$title.'</DIV><DIV class="popo_bc_url">'.$url.'</DIV><DIV class="popo_bc_excerpt">'.$excerpt.'</DIV></DIV></DIV></DIV>';
        return $html;
    }

ブログカードっぽい表示になった

表示させてみます。

ぽぽづれ。 | 「ただいま」の挨拶よりも電源スイッチONのが先な、そんな日常を綴る『ぽぽろんのパソコンつれづれ日記（ぽぽづれ）』へようこそ。
popozure.info


だいぶ「ブログカード」っぽくなってきました。

今回のコード

今回はここまでです。

プラグイン本体

<?php
/*
Plugin Name: popo-Blogcard
Plugin URI: https://popozure.info/20180808/13142
Description: Blogcard
Version: 0.0.1
Author: poporon
Author URI: https://popozure.info
License: GPL2
*/
class popo_blogcard {
    function __construct() {
        add_shortcode('blogcard', array($this, 'shortcode' ) );
        add_action('wp_enqueue_scripts', array($this, 'enqueue' ) );
    }
    function shortcode($opt , $content = null ) {
        $url = $opt&#91;'url'&#93;;
        $ch = curl_init($url);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true );
        curl_setopt($ch, CURLOPT_TIMEOUT, 8 );
        curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true );
        curl_setopt($ch, CURLOPT_MAXREDIRS, 8 );
        curl_setopt($ch, CURLOPT_AUTOREFERER, true );
        curl_setopt($ch, CURLOPT_COOKIESESSION, true );
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false );
        $html = curl_exec($ch );
        if (curl_errno($ch ) ) {
            $site_name = '';
            $title = $url;
            $excerpt = '';
        } else {
            $html = mb_convert_encoding($html, 'UTF-8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS' );
            if (preg_match('/property="og:title"\s*content="(&#91;^"&#93;*)/si', $html, $m ) ) {
                $title = esc_html($m&#91;1&#93;);
            } else {
                if (preg_match('/<\s*title\s*&#91;^>]*>\s*([^<&#93;*)\s*<\s*\/title\s*&#91;^>]*>/si', $html, $m ) ) {
                    $title = esc_html($m[1]);
                }
            }
            if (preg_match('/property="og:description"\s*content="([^"]*)/si', $html, $m ) ) {
                $excerpt = esc_html($m[1]);
            } else {
                if (preg_match('/name="description"\s*content="([^"]*)/si', $html, $m ) ) {
                    $excerpt = esc_html($m[1]);
                }
            }
            if (preg_match('/property="og:site_name"\s*content="([^"]*)/si', $html, $m ) ) {
                $site_name = esc_html($m[1]);
            } else {
                $m = parse_url($url );
                $site_name = $m['host'];
            }
        }
        curl_close($ch );
        $html = '<DIV class="popo_blogcard"><A href="'.$url.'" target="_blank" class="popo_bc_link"><DIV class="popo_bc_wrap"><DIV class="popo_bc_site_name">'.$site_name.'</DIV><DIV class="popo_bc_content"><DIV class="popo_bc_title">'.$title.'</DIV><DIV class="popo_bc_url">'.$url.'</DIV><DIV class="popo_bc_excerpt">'.$excerpt.'</DIV></DIV></DIV></DIV>';
        return $html;
    }
    function enqueue() {
        wp_enqueue_style('popo-blogcard', plugin_dir_url(__FILE__).'style.css');
    }
}
$popo_blogcard = new popo_blogcard;

スタイルシート

.popo_bc_wrap {
    margin: 16px;
    padding: 8px;
    width: 96%;
    border: 2px solid #8888ff;
    background-color: #ffffff;
    border-radius: 3px;
}
.popo_bc_link {
    text-decoration: none;
}
.popo_bc_site_name {
    display: block;
    font-size: 12px;
}
.popo_bc_title {
    display: block;
    font-size: 18px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.popo_bc_url {
    display: block;
    font-size: 12px;
    color: #00f;
    text-decoration: underline;
}
.popo_bc_excerpt {
    height: 32px;
    font-size: 12px;
    color: #444;
    overflow: hidden;
    text-overflow: ellipsis;
}

次回は･･･

いよいよ要。

データベースにテーブルを作って、データをキャッシュしようと思います。

ぽぽづれ。
 
2018.08.24
リンクをカードにするプラグインを作ろう！(8)DBテーブルにキャッシュする
https://popozure.info/20180824/13323
DBにテーブルを作ってタイトルと概要文をキャッシュします。前回までスタイルシートを付けてブログカードっぽくしました。DBの作成とアクセステーブルの項目を考えるDBにテーブルを作成します。記録する項目としては「URL」、「サイト名称」、「タイトル」、「概要文」です。Pz-LinkCardではこの他に「登録日」や「ソーシャルカウント」などがあります。項目名称項目名文字数URLURLVARCHAR(2048)サイト名称site_nameVARCHAR(100)タイトルtitleVARCHAR(200)概要文excerptVARCHAR(500)有効化したときに呼ぶ関数プラグインを有効化したと...

では、この辺で。(^-^)o

コメント

タイトルとURLをコピーしました