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

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

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

前回まで

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

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

ファイルを作成する

プラグインと同じディレクトリに「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 = '
'.$site_name.'
'.$title.'
'.$url.'
'.$excerpt.'
'; return $html; } function enqueue() { } } $popo_blogcard = new popo_blogcard;

呼ばれる関数を記述する

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

        curl_close($ch );
        $html = '
'.$site_name.'
'.$title.'
'.$url.'
'.$excerpt.'
'; 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 = '';
        return $html;
    }

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

表示させてみます。

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


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

今回のコード

今回はここまでです。

プラグイン本体

]*>\s*([^<]*)\s*<\s*\/title\s*[^>]*>/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 = '';
        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;
}

次回は・・・

いよいよ要。

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

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

コメント

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