れいぶろぐゲームをプレイしたり、作ったりしてる人、LABEのブログ『れいぶろぐ』。創作のこと、PCのこと、その他趣味のことを広く浅く。(11)4月はなんとブログの記事を一つも書いていなかった。サボってばかりいないで、WordPressのTipsでも書くか......ということで、ネタ帳から最終更新日が去年の12月になってるこのネタを引っ張り出してきた。......なんか以前にも同じようなこと書いたような。使い、ページ(記事)単位で自由にクラスを追加したり除去したりする方法を考えてみた。追加するWordPressの関数だ。解説ページも参照してくれ。おいて)以下のように使われている。?>>これで、たとえばWordPressのインストール時に生成される「About」ページでは以下のような出力になる。上の例は「固定ページ」のものだが、記事ページでいうと、この記事のひとつ前の記事ではこんな感じ。single-format-standard">このように、現在どのようなページを表示しているかをクラスで判別できるようになり、CSSによるデザインに役立つ。どのページにどんなクラスが追加されるかは、上記リンクのCodex日本語版にまとめられている。この関数に引数を渡すことで、さらにクラスを追加することができる。配列として取得できる。引数を渡すとクラスをいくつでも追加できる。受け付ける引数は一つだけだが、複数のクラスを追加するには空白区切りの文字列か、配列を渡す。いう三つのクラスを追加する例。使って文字列に展開している。クラスの一覧を取得して、配列を自力で管理している。カスタムフィールドによってページ(記事)毎に任意のクラスを追加することもできる。「body-class」というカスタムフィールドを設定し、その値をそのままクラスとして追加するには以下のようにする。?>">ところで、配列に別の配列の要素を追加したり、文字列要素を一つ追加するには次のように書くと簡単だ。'class5';?>クラスを除去ここからがこの記事の本題だ。)によって標準で追加されるクラスから、特定のクラスを除去する方法を探していた。ここでは、ページ(記事)に「body-class-x」というカスタムフィールドを設定し、その値に該当するクラスを除去する方法を説明する。取得した配列から、指定した文字列と一致する要素を除去すればよい。上の例と同じものである。要素から探し、除去している。要素に重複があった場合に除去し、さらに除去によって抜けたインデックスを振り直している。同様のカスタマイズが可能だ。この関数によって追加されるクラスには、記事ごとの属性が含まれているので、カスタマイズすることでCSSによるデザインをより高度に制御できるだろう。何に使うの?で、今回のTipsはちょっと需要がなさそうな感じもしている。デフォでもいろいろクラスを追加してくれるから、さらにクラスを追加する必要性もあんまりなさそう、という意味だ。ブログのトップやカテゴリなどのアーカイブ系ページと、単一の記事ページで、どちらも同じようなクラスを吐くんだよね。両者を見分けるのは難しい。ほうを見れば区別はできるんだけど、CSSのセレクターを増やすと「詳細度」が上がってルールの記述に影響が出てしまう。よって追加されるクラスを自在に制御する方法を紹介した。いうか、ネタは書こうと思った時にすぐ書かないと、この方法を考えたときのことを半分くらい忘れてしまってるよねっていう。気の利いた解説ができたかもしれないのに......サボりがちなのをこれから徐々に修正していきたい。(2017/02/25)こめんとコメントはまだありません。こめんとする本文のみ必須。メールアドレスは公開されないよ。お名前メアド名前とメアドを記憶する数式の空欄を正しく埋めてね。※本文には日本語を“数文字”以上含めてね。(詳細)コメントを投稿すると、メールアドレスを含む投稿内容と、投稿者を識別するIPアドレスなどが当サイトのサーバーに送信され、保持される。これらの情報は当サイトのサービスの提供やコンテンツの改善のために利用される。あなたは、当サイトによるこれらの情報の取り扱い(取得・処理・利用)に同意しなければ、コメントを投稿することはできない。この同意の要件は法的な要件として追加されたもので、当サイトによるこれらの情報の取り扱いは従来から変わっていない。当サイトの個人情報の取り扱いについて詳しくは、プライバシー・ポリシーを読んでね。(936)※過去30日間の閲覧数データによる。