web-dev-qa-db-ja.com

これは与えられた投稿タイプにCSSをスタイルするための最良の（そして唯一の）オプションですか？

はじめにお読みいただき、ありがとうございます。また、知識不足のためお詫び申し上げます。

私はWPサイトをテーマと子テーマで実行しています。スペイン語、英語、ポルトガル語の3カ国語で運営しています。私はWPMLプラグインを使っています。

私の問題は、翻訳されたポートフォリオと連絡先のページで、サイトが私の望む通りに見えていないことです。 WPMLサポートの終了に関するかなり多くの調査の結果、結論は、私が開発したのは、驚くほど投稿/ページ固有のレベルに設定された追加のCSSシートを含む子テーマだということでした。だから、スタイリングは写真のようになります：

CSSSheetPageLevelStyling

CMorePageSpecificStyling

連絡先IDの投稿も同様です。

そのため、このシナリオでは、WMPLサポートソリューションはスクリプトを「コピー」し、コピーした行のpost idを変更するだけです。

これは短期的な解決策であると考えています。将来的には次のいずれかが起こる可能性があるからです。

- 2つ目のポートフォリオページを作成したい - 新しい言語を追加したい - ポートフォリオまたは連絡先ページを削除して再作成した場合は、新しい投稿IDが追加されます。

それで、問題は、これをより「きれいな」やり方で達成するための別の選択肢ではないかということです。私はその方法を知りませんが、CSSで言っているようなことを想像してみてください。連絡先の場合、スタイルは次のようになります。

私の開発者はこのアプローチは間違っていると言っています、しかし私にとって彼らの説明は意味がありません。

アドバイスをいただければ幸いです

乾杯

postscustomizationcsstranslationstyles
4
user114431

あなたはあなたの仮定に絶対に正しいです。 CSSは投稿IDに絶対に関連付けられないようにする必要があります。これらのIDは常に変更される可能性があるためです（たとえば、投稿を別のインストールに移行する場合など）。

いつでも管理ダッシュボードに制御を移すことができます。

特別な方法でスタイルを設定するカスタムフィールドを投稿/ページに追加します（この例では、すべての言語バージョンの投稿/ページに同じカスタムフィールドがあります）。それがwpse_custom_classになるとしましょう。各投稿/ページに追加してください。この例では、値はportfolioになります。

このコードをfunctions.phpに追加します（この回答からをコピーしたもの）。ページがロードされると、カスタムフィールドを探し、その値をCSSのクラスとしてHTMLのbody要素に挿入します。

function wpse_filter_post_class( $classes ) {
    $my_post_class = get_post_meta($post->ID, "wpse_custom_class");

    if( $my_post_class != '' ) {
        $classes[] = $my_post_class;
    }
    return $classes;
}

add_filter( 'post_class', 'wpse_filter_post_class' );

あなたのデザイナーはこれでこんな感じで使うことができます。

.portfolio #content .main {
    max-width: 100%;
}

これは管理者側の作業です（あなたまたはデザイナーがすべてのカスタムスタイルページに手動でアクセスしてこれらのCSSクラスを指定する必要があります）が、最終的には非常に柔軟で将来性のあるソリューションに貢献します。

2
montrealist

なぜID固有のCSSルールを使わないのか：

ID固有のCSSを投稿するのは簡単な解決策にしかできず、ベストプラクティスとはほど遠いものです。ポストIDは多くの場合信頼できません。例えば：

  • 投稿を削除して、新しい投稿に置き換えます。

  • 将来あなたのサイトを別のサーバーに移行する必要があるかもしれません。

  • 新しいバージョンの投稿/ページを作成していて、古い投稿/ページを置き換える前に新しい投稿/ページを確認することをお勧めします。

これらすべての場合において、ポストIDは変更される可能性があり、それらのID固有のCSSはこれ以上適用できなくなります。そのため、デザインのニーズに合わせてCSSをもう一度更新する必要があります。 WordPressは非常にカスタマイズ可能なので、ポストIDベースのCSSルールを使用しなければならないシナリオはありません。より成熟した開発と設計の実践のために、ID特有のCSSルールを使用することは非常にお勧めできません。代わりに、以下のいずれかのオプションを使用してください。

ページテンプレートを使用：

WordPressは長い間そしてバージョン4.7からページのための ページテンプレートをサポートします WordPressはあらゆる投稿タイプのための ページテンプレートをサポートします あなたが4.7またはそれ以降のWordPressを持っているのであれば、あなたはあなたの子供のテーマの中のどんな投稿やページに対しても特定のページテンプレートを作成することができます。

この方法では、ID固有のCSSはまったく必要ありません。いったんそれらの特定のテンプレートがあれば、どのページまたは投稿にも同じデザインが必要になるたびに、投稿から同じテンプレートを選択するだけです。ページエディタそれで全部です。その後は、そのページテンプレートのデザインがそのpage、postまたはcustom post typeに適用されます。

post_class フィルタフックを使う：

特定のテンプレートを割り当てるために管理者パネルの別のページや投稿に行きたくない場合（あなたはたくさんのページ/投稿があるかもしれません）、post_classフィルタフックを使うことができます。このように、あなたはそれらを必要とする異なった投稿とページにユニークなCSSクラスを割り当てて、それらのCSSクラスに基づいてそれらをスタイルすることができるでしょう。たとえば、あなたがカスタム投稿タイプmovieを持っていて、movieエントリに異なるCSSクラスが欲しいとします。次に、テーマのfunctions.phpファイルに、次のコードを追加します。

add_filter( 'post_class', 'movie_post_class' );
function movie_post_class( $class ) {
    if ( get_post_type() === 'movie' ) {

        // remove these CSS classes from movie entries
        $remove = array( 'css-class-to-remove', 'another-class-to-remove' );
        $class = array_diff( $class, $remove );

        // add these custom CSS classes to movie entries
        $add = array( 'custom-movie', 'my-movie-class' );
        $class = array_merge( $add, $class );
    }
    return $class;
}

これで、次のCSSを使用して映画の視聴者をターゲットにすることができます。

.custom-movie {
    background-color: gold;
}

body_class フィルタフックを使う：

状況によっては、ページテンプレートを使用したくない場合、（post_classが提供するものと比べて）ページデザイン全体をより一般的に制御する必要がある場合は、<body>フィルタフックを使用してbody_classクラスを変更できます。 post_classフィルタフックでできることこのような：

add_filter( 'body_class', 'movie_body_class' );
function movie_body_class( $class ) {
    if ( is_single() && get_post_type() === 'movie' ) {

        // remove these CSS classes from body class
        $remove = array( 'css-class-to-remove', 'another-class-to-remove' );
        $class = array_diff( $class, $remove );

        // add these custom CSS classes to body class of a movie post
        $add = array( 'custom-movie', 'my-movie-class' );
        $class = array_merge( $add, $class );
    }
    return $class;
}

これで、次のCSSを使用して映画のカスタム投稿ページをターゲティングできます。

body.custom-movie .any-inner-content-class {
    color: blue;
}

このカスタムクラスは<body>に追加されているので、この方法でページ内の任意の要素をターゲットにすることができます。

0
Fayaz