ぱらげって誰?

【WordPress】CSSの擬似要素::beforeや::afterのcontentをjQueryで動的に変更する方法

【WordPress】CSSの擬似要素::beforeや::afterのcontent部分をjQueryで動的に変更する方法 IT備忘録

 

ぱらげです。

WordPressでコンテンツを作る時に、以下のようなデザインを設置することがあるかもしれません。↓↓

 あわせて読みたい 

ぱらげの場合、今まで「あわせて読みたい」の文字列を、CSSの::beforeや::afterなどのcontent部分にそのまま当てていました。

しかし、例えば「あわせて読みたい」の部分を、内容によっては「お得情報」に変更したい。なんていうことが後々でてくるかもしれません。

その場合は、jQueryを使ってcontentプロパティを動的に変更するのが便利。

概要:content:attr(属性名)を使って変更

attrの()内に属性名を指定することで、contentプロパティの値を自在に変更できるようになります。

以下に、WordPressを使ったjQuery実装方法について詳しく載せていきます。

WordPressでの実装の流れ

style.cssのcontent部分を修正

style.cssの編集

外観→テーマの編集→スタイルシート(style.css)を選び、変更したい擬似要素が設定されているクラスを開きます。
「content:”文字列”;」になっているところを「content: attr(data-item);」に修正します。

 

上記コードは、本ブログでも実際に使用している囲みボックス全体のコードです。
これをそのままcssに貼ることで、同じような擬似要素を使った囲みボックスデザインが設置できます。

最後に忘れずに「ファイルを更新」ボタンをクリックして修正内容を保存しましょう。

header.phpにJavaScriptを記述

header.php

先ほどと同様に「テーマの編集」画面からheader.phpを選択します。

WordPressにはデフォルトで既にjQueryが読み込まれているので、今回使用するJavaScriptコードを記述するだけで済みます。

記述する位置は※JavaScript関連の記述があればそれ以降に記述し、さらに</head>タグの直前にしておきます。
※<?php get_template_part(‘tmp/head-javascript’); ?>など、javascriptに関連する記述

HTMLにカスタムデータ属性を指定

 

htmlには上記のように設定し、cssやjavascriptで設定したカスタムデータ属性を指定します。
すると以下のように表示がされると思います。↓

 

ボックスの中身

 

以上、WordPressで擬似要素のcontentプロパティをjQueryで動的に変更する方法でした!

 

 

コメント

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