投稿者: Susumu Seino

nth系の擬似クラスを利用して「○○個目の要素にはスタイルを付与」なんてことをよくやりますが、クラス名を付与した要素をnthを使って数えてCSSでスタイルを付与することは現段階ではCSSのみで実装できないようです。

CSS3の擬似クラス [ :nth-child ] と [ :nth-of-type ] の違いと参考の記事まとめ

特定のクラスを付与した要素はnthで利用できない

   <div class="sample">
        <p>1</p>
        <p class="acitve">
            2
        </p>
        <p>3</p>
        <p class="acitve">
            3
        </p>
        <p>5</p>
    </div>

このようなマークアップの場合は後述のとおり、セレクターのみでは数えることができますが「○○個目の.active」は選択できません。

有効なnthの指定

.sample p:nth-of-type {
   color:red;
}

無効なnthの指定

.sample p.active:nth-of-type {
   color:red;
}

問題の解決方法

特定の小要素がある親要素にCSSをあてる方法

:has擬似クラスがCSS4の時に使えるようになる予定ですが、同様にCSS4では:nth-​​matchが利用可能となるためそれまでCSSのみでの実装は難しそうです。

li：nth-​​match（2 of .active）{ 
color:red;
}

JavaScriptを利用した解決方法

CSSだけでは難しいのでJavaScriptを利用して実装する場合は後述のコードで実装可能です。JSのみとjQueryを使った短縮版も記載してあります。

// JavaScriptのみ
document.getElementsByClassName（ 'active'）[1] .style.color = 'red';

// jQueryを利用
$（ '。active：eq（1）'）。css（ 'color'、 'red'）;

前述のコードでは2番目の.activeの要素がにスタイルを個別で付与してあります。0から数字を数えているので3番目の要素を指定したい場合は2、6番目の場合は5とそれぞれ数字を変えると指定することができます。

参考URL

Medium.com で表示

「○○個めのliには別のスタイルをあてたい」や「奇数の要素の背景色を変えたい」といった時は擬似クラスの:nth-child や :nth-of-type を使って解決します。

:nth-child と :nth-of-type の違い

:nth-child と :nth-of-type の違いは要素 (セレクター) が同じかどうかです。:nth-child の場合はdivやpのように違う要素でも数に数えますが、 :nth-of-type の場合は div や p などの要素と一緒にし異なった要素は数えません。 後述のようなHTMLがあった場合、 .p-01 にスタイルを指定したい時の記述の違いをみていきましょう。

<div class="sample">
    <div>
        div-01
    </div>
    <div>
        div-02
    </div>
    <p>
        p-01
    </p>
    <p>
        p-02
    </p>
    <div>
        div-03
    </div>
    <p>
        p-03
    </p>
    <div>
        div-04
    </div>
</div>

.sample :nth-child(3) {
    background-color: red;
}
.sample p:nth-of-type(1) {
    background-color: red;
}

このように:nth-child , :nth-of-child ではそれぞれの記述のルールがあり、同じ要素にスタイルをあてたくても違った書き方となります。 また.sampleの中の1つ目のp要素にスタイルをあてるために p:first-childと指定しても、.sampleの中にある1つ目の小要素はpではなくdivなためこの記述も無視されます。

参考の記事

oddやevenを利用して奇数偶数の指定や、3n(3の倍数)、-n+5(最初から五番目まで)、n+6 (六番目以降)などといった指定も可能です。 詳しくは疑似クラス :nth-child ｔ :nth-of-child が詳しく書いてある記事を見てみましょう。

https://coliss.com/articles/build-websites/operation/css/nth-child-vs-nth-of-type.html

https://tech.qookie.jp/posts/css-nth-child-style/

https://wp-p.info/tpl_rep.php?cat=css-intermediate&fl=r3

https://wp-e.org/2014/05/20/2420/

https://qiita.com/nabe_kurage/items/c0ec708f4ad15fac62ae

WordPressなどのCMSを利用したウェブサイトを運用していると「この要素を持った親要素のマージンをなくしたい」などの状況にでくわすことが多々あります。対応策をいくつか紹介します。

<p>
    <span>a</span>
</p>
<p>
    <span>o</span>
</p>
<p>
    <span>e</span>
</p>
<p>
    <span>u</span>
</p>
<p>
    aoeui
</p>
<p>
    <span>i</span>
</p>
<p>
    aoeui
</p>

このようにp要素が続く場合と単体の場合でマージンを変えたい場合、なおかつCMSの仕様に依存するため特定の小要素を持つ親要素にクラスを指定できない時の対処方法です。

対応方法

CSS4で:has (擬似クラス)を使う

CSS3では特定の小要素がある親要素にCSSをあてる方法がないらしく、CSS3の次にくるであろうCSS4で実装予定の機能 :has (擬似クラス) を利用することで実装が可能となります。

https://developer.mozilla.org/ja/docs/Web/CSS/:has

しかし前述の記事でも確認できるとおり、現状ではどのブラウザでも対応できないためしばらくは別の方法を模索するしかありません。

JavaScriptで:has(メソッド) を使う

CSSでは対応できませんがjQueryの:hasメソッドを活用することで、特定のクラスを付与し上書きすることは可能です。

<script src="https://code.jquery.com/jquery-3.4.1.slim.js" integrity="sha256-BTlTdQO9/fascB1drekrDVkaKd9PkwBymMlHOiG+qLI=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function() {
    $("p:has(span)").addClass("parent");
});
</script>

まとめ

CSS4がやってきて:has (擬似クラス) が利用できるまではjQueryの:hasメソッドを利用して特定の要素にクラスを付与するとよいでしょう。 他に良い方法があればコメントなどで教えていただけると嬉しいです！

参考URL

https://web-diy.jp/2017/03/170327_01/

https://www.webdlab.com/labs/jquery-css/

Googleニュースに表示させるためにパブリッシャーセンターで登録を済ませて、無事に承認がおりたが正しくインデックス (Googleに登録) されず正しく機能しない場合があります。そんな時に問題の解決の糸口となるような調査方法の解説です。 まずは後述のGoogle公式ドキュメントを参照しましょう。Google パブリッシャーセンターヘルプには該当の記事がどのようにインデックスされているか、また該当のURLでどの記事がどのようにGoogleニュースにインデックスされているのかがわかります。 Google ニュースの記事が見つからない場合のトラブルシューティング – パブリッシャー センター ヘルプ 前述のリンクを参考に調べられることは後述の二項です。

1. Googleニュースのサイトでサイトの記事がどのようにインデックスされているか確認する
2. Search Console の URL検査ツールを利用してどのようにおクローラが認識しているかを確認する

また (2) のURL検査ツールについては別ソースを参考にするとより詳しく調べる事ができるでしょう。

https://support.google.com/webmasters/answer/9012289?hl=ja

上記のようにインデックスされている内容が間違っている、なおかつSearch Console の URL検査ツールを利用しても問題が発見できない場合は、Googleニュースのソース (出典元)を調査するとよいでしょう。Google ニュースにはニュース用のサイトマップが存在するのでサイトマップがどのように生成されているのか、またRSS/feedでの登録も可能なため登録しているRSSの出力は正しい状態になっているかを確認すると良いでしょう。 Googleニュースは過去にGooglebot-newsという通常のクローラとは別のクローラで探索されていたとされていますが、弊社が調査をした案件ではGoogleのサーチエンジンには正しくクロール・インデックスされており、Googleニュースには正しくインデックスされていなかったという事例がありますので、別のクローラが動いている可能性もあるかもしれません。

https://support.google.com/news/publisher-center/answer/6075793?hl=en

またWordPressを利用しているのであれば、Googleニュースに対応したプラグインもあるので利用してみると状況が改善するかもしれません。

XML Sitemap & Google News

https://neilpatel.com/blog/how-to-get-your-website-added-to-google-news-and-drive-real-time-traffic/

カスタム投稿タイプを作成し、ループで表示する時に投稿タイプ名を表示する方法です。

<?php
$post_id   = $post->ID;
$post_type = get_post_type( $post_id );
$post_type = $post_type;
$obj       = $wp_post_types[ $post_type ];
echo $obj->labels->singular_name;
?>

他の処理もしやすくするためにポストIDやポストタイプを都度変数に代入して、最終的んにはwp_post_typesのオブジェクトからsingular_nameを取り出して表示しています。

投稿でいうカテゴリーなどのタクソノミーを追加できる”カスタムタクソノミー”という機能を使った時に、そのタクソノミーのタームを指定して「持っている場合は○○」といった条件分岐をしたい時の分岐条件です。

if ( is_object_in_term( $post->ID, 'custom_tax', 'custom_term' ) ):

前述のコードをループ内で仕様し、custom_tax と custom_term を自分で指定したものに変えましょう。

<?php if ( is_object_in_term( $post->ID, 'custom_tax', 'custom_term' ) ) : ?>
    Yes I am!
<?php else: ?>
    No I'm not.
<?php endif; ?>

実際にはこのように該当のタームを持っている時だけ表示を変えることができます。 参考はこちら

https://wordpress.stackexchange.com/questions/13464/check-if-post-type-has-term

タイトルの通り「カスタム投稿タイプ・カスタムポストタイプで指定したカテゴリー (タクソノミー) をタームのスラッグで指定したい」時の対処方法とコードです。

$loop = new WP_Query( array(
    'post_type'      => 'new_posttype',
    'posts_per_page' => 1,
    'tax_query' => array(
        array(
            'taxonomy' => 'new_category',
            'field' => 'slug',
            'terms'    => array('category_name'),
            'include_children' => false
        )
    )
) );
while ( $loop->have_posts() ) : $loop->the_post();

    get_template_part( 'template-parts/content' );

endwhile;
wp_reset_postdata();

tax_qeuryを利用して定義をしますが、その時にfieldsの項目でslugを指定するのを忘れないようにしましょう。また、idなどと変更することで出力したいタームの判定形式を変えることもできます。今回はidで取得すると開発環境と本番環境で振る舞いが変わってしまいそうなのでslugで判定しています。

https://stackoverflow.com/questions/46532162/wordpress-tax-query-multiple-terms-using-or-operator

大変お世話になっている https://2inc.org/ の Smart Custom Fields をコードベースで管理する時にプラグインが有効化されている時にだけコードを読み込む方法です。

https://2inc.org/

Smart Custom Fields

Smart Custom Fields が有効化な時だけ読み込むコード

<?php 
if ( in_array( 'smart-custom-fields/smart-custom-fields.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {
    //plugin is activated
    require_once get_template_directory() . '/functions/custom-fields.php';
};?>

functions.phpは直接汚したくないためパーツを分解して require_once を使ってパーツごとに読み込んでいるのですが、カスタムフィールドの指定をする時にプラグインが有効化されていないとエラーが起きて画面が表示されなくなり、管理画面にも入ることができずに四苦八苦します。 前述のコードのとおり、Smart Custom Fields が有効化されている時だけカスタムフィールドの定義をすれば有効化されている時だけファイルが読み込まれます。

is_plugin_active()

また、Smart Custom Fields の設定方法をコードで管理したいときは下記の記事が参考になると思います。

https://2inc.org/blog/2015/03/12/4670/

https://yosiakatsuki.net/blog/smart-custom-fields-code-base/

https://qiita.com/yousan/items/7cbd56308ecc0e2bb263

タイトルのとおり、WP User Avatar で設定した画像のURLをループ内で取得する方法です。

WP User Avatar | User Profile Picture

後述のコードではループの記事から著者のIDを取得して、そのIDをもとにWP User Avatar で設定した画像のURLを取得しています。おそらくループないでしか利用できません。またscrapeImageという機能で画像のURLが正しい形式を確認し、安全に出力するようにしています。

<?php
function scrapeImage( $text ) {
    $pattern = '/src=[\'"]?([^\'" >]+)[\'" >]/';
    preg_match( $pattern, $text, $link );
    $link = $link[1];
    $link = urldecode( $link );

    return $link;
}


$author = get_userdata($post->post_author);
$user_id      = $author->ID ;
$avatar_img  = scrapeImage( get_wp_user_avatar( $user_id ) );
?>

<img src="<?php echo $avatar_img ;?>">

参考の記事はこちらです。

https://stackoverflow.com/questions/35648385/in-plugin-wp-user-avatar-get-avtar-url-not-with-img-src-tag