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

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

前回まで

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

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

ファイルを作成する

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

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

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

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

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

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

フックを設定する

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

呼ばれる関数を記述する

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

呼ばれる関数を記述する

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

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

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

popo_blogcard

popo_bc_wrap

popo_bc_site_name
popo_bc_site_content

popo_bc_title
popo_bc_url
popo_bc_excerpt

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

表示させてみます。

[blogcard url="https://popozure.info"]


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

今回のコード

今回はここまでです。

プラグイン本体

スタイルシート

次回は・・・

いよいよ要。

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

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

広告
関連記事
広告