ブルーシュ

IT技術の勉強記録

ホーム > Tips > WordPress

プラグインなし WordPress 記事ごとにCSSスクリプトを実装する

, , , ,

個別記事にcssのコードを埋め込んでみたいと思います。
関連記事

 
Advanced Custom Fieldsを使っていますが、普通のカスタムフィールド機能でもいけると思います。
 

カスタムフィールドの設定

テキストエリアのフィールドを作ります。
フィールド名・・・「css」
フィールドタイプ・・・テキストエリア
改行・・・なにもしない
カスタムフィールドの設定
 

single.phpを編集

投稿記事のテンプレートファイルを編集します。

css

ループ開始直後あたりにこれを書きます。

<style type="text/css"><?php the_field("css"); ?></style>

 

それでは、実際に記事投稿画面から入力してみます。

 

動作サンプル

記事投稿画面を開き、まずはコードエディターのブロックにサンプルのタグを入力します。
<p class="jugemu">じゅげむじゅげむ</p>

 

cssの例

カスタムフィールドのcssにこのように入力してみます。

cssコードの例
.jugemu{ color: pink; }

文字がピンクになりました。↓

じゅげむじゅげむ

プラグインなし WordPress 記事ごとにCSSスクリプトを実装する #WordPress #ウェブデザイン #ウェブ制作 #WEBデザイン #WEB制作 #ACF #AdvancedCustomFields #スクリプト #css #カスタムフィールド

作者の似顔絵

プログラミング歴19年🌈調べたことをブログにまとめていきます。
記事の感想・質問・間違い指摘などはツイッター ( @blooshcompany ) へお願いします。

秋田のウェブ活用をサポート

ホームページを自作してコスト削減!秋田の事業者は無料で利用できます。
ネットショップ・WordPress・SEO対策などさまざまなお悩みをサポートします。

その他、フロントエンド案件のご依頼はインフォメーション

秋田市 レンタル着物 笹パンダ堂のバナーリンク