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

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

前回まで

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

[link url=”https://popozure.info/20180818/13278″]

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

ファイルを作成する

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

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

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

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

[css title=”style.css” mark=”1-35″].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;
}[/css]

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

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

フックを設定する

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

[php title=”popo-blogcard.php” start-line=”11″ mark=”3″] function __construct() {
add_shortcode(‘blogcard’, array($this, ‘shortcode’ ) );
add_action(‘wp_enqueue_scripts’, array($this, ‘enqueue’ ) );
}[/php]

呼ばれる関数を記述する

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

[php title=”popo-blogcard.php” start-line=”54″ mark=”5-6″] curl_close($ch );
$html = ‘

‘;
return $html;
}
function enqueue() {
}
}
$popo_blogcard = new popo_blogcard;[/php]

呼ばれる関数を記述する

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

[php title=”popo-blogcard.php” start-line=”54″ mark=”6″] curl_close($ch );
$html = ‘

‘;
return $html;
}
function enqueue() {
wp_enqueue_style(‘popo-blogcard’, plugin_dir_url(__FILE__).’style.css’);
}
}
$popo_blogcard = new popo_blogcard;[/php]

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

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

popo_blogcard popo_bc_wrap popo_bc_site_name popo_bc_site_content popo_bc_title popo_bc_url popo_bc_excerpt

[php title=”popo-blogcard.php” start-line=”54″ mark=”2″] curl_close($ch );
$html = ‘

‘;
return $html;
}[/php]

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

表示させてみます。

外部ヘッダー
ぽぽづれ。
外部リンク
 3 pockets
ぽぽづれ。
https://popozure.info
「ただいま」の挨拶よりも電源スイッチONのが先な、そんな日常を綴る『ぽぽろんのパソコンつれづれ日記（ぽぽづれ）』へようこそ。
外部ボタン

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

今回のコード

今回はここまでです。

プラグイン本体

[php title=”popo-blogcard.php”]]*>\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;[/php]

スタイルシート

[css title=”style.css”].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;
}[/css]

次回は･･･

いよいよ要。

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

[link url=”https://popozure.info/20180824/13323″]

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

[amzn-link asin=”4774187062″][amzn-link asin=”B00M939Y0I”][amzn-link asin=”4798143774″][amzn-link asin=”4797393157″][amzn-link asin=”4774190640″]

関連