WordPressで自分が書いた文章だけをカスタマイズしたい。本文以外は、装飾を反映させたくない場合があります。例えばリンクaタグ・リストなどの装飾。
コンテンツ以外にたくさん使われ、サイドやナビ、フッターに反映させず、本文だけ反映させる親要素を作ると簡単に装飾できます。
コンテンツを出力している部分を親要素で囲みかたをサクッと書いていきますね！
WordPrressのコンテンツのみを出力しているタグを探す
WordPressのテンプレートファイルとブログをじっくりみてるとループ内に、<?php the_content(); ?>というテンプレートタグが、調べたテーマの中で多く使われていました。
※get_template_part('namae')のというWordPressの関数の場合もあるかもしれませんが…。namaeは、コンテンツの親要素名です。
このタグが投稿画面で文章を書いた部分を出力しているタグなので、そこをdivで囲めば、コンテンツだけ反映するカスタマイズが出来ます。
カスタマイズしたいテンプレートを編集
投稿ページのコンテンツの部分のみに親要素を作りたい場合はsingle.phpを、固定ページのコンテンツにはpage.php編集をdivで囲めばOKです。
念のため簡易的にでもバックアップをとってから＾＾
- :個別投稿 (single.php)を編集します。
- 個別投稿ページ (page.php)
<?php the_content(); ?>をdivで囲んであげる
<div class="entry-content"> <?php the_content(); ?> </div>
こんな感じで、上書き保存。
本文のみ反映させる装飾の指定方法
本文のみを指定するようにHTMLで指定したので、そこだけ反映するセレクタを付ければ、OK！
リンクのaタグの場合
.entry-content a .entry-content a::before
HTMLで本文にあるaタグ、本文ないのaタグ前と言う場所を指定し装飾するセレクタを付けたら、反映するわけです。
投稿ページと、固定ページの装飾を変えたいとき
single.php（投稿ページ）とpage.php（固定ページ）違った装飾したい場合。
<div class="entry-content">
<div class="page-content">とクラス名を変更してあげればOK！
またテーマで使ってるクラス名とかぶらないようにすれば完成です＾＾
こうすれば、コンテンツのみ反映するカスタマイズができるから、便利かなと。
さいごに
親要素を付けない場合は、反映させたいコンテンツ以外に反映したタグを指定して、CSSで初期化するのもありかと思います。
ちなみにテンプレートを眺めていて気付いただけなので、こざっぱりした内容ですね＾＾；
HTMLの勉強をローカルで始めたい人に書いたページ！興味があればどうぞ＾＾
それでは、かうたっくでした！
Comments