web-dev-qa-db-ja.com

<！ - nextpage - >タグを使用してページをページ分割する場合、2番目以降のページスタイルはどのようにカスタマイズできますか？

私はsingle.phpまたは投稿の2ページ目に異なるスタイルを適用したいです。これどうやってするの？

single.phpには、ページを2つの部分に分割するための次のコードがあります。

<!--nextpage-->

別の "タブ"を投稿などに追加する別の方法がある場合、私はどんな助けにも感謝しています。このようになります。

http://localhost/mysite/1024/postname/gallery/
http://localhost/mysite/1024/postname/custom-page/

single.phpのコード：

    <?php get_header();?>
 <main>
<?php get_sidebar() ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <div id="post">

            <div class="top-single-movie">

            <div class="info">  
            <h3 class="title" id="post-<?php the_ID(); ?>">
            <a href="<?php the_permalink() ?>" rel="bookmark">
            <?php the_title(); ?></a>
            <?php if( get_field('date') ): ?>
             ( <?php the_field('date'); ?> )
            <?php endif; ?> 
            </h3>
            </div>


            <?php if(has_post_thumbnail()) :
            the_post_thumbnail('medium');
            else : 
            echo '<img src="'.get_bloginfo('template_directory').'/img/default.png">';
            endif;
            ?>

            </div><!-- End. top-single-movie -->


            <?php the_content(); ?>

            <?php 
    wp_link_pages( array(
        'before' => '<div class="page-link"><span>' . __( 'Pages:', 'tl_back' ) . '</span>',
        'after' => '</div>'
    ) ); 
?>

            <?php include (TEMPLATEPATH . '/php/single/tv-single-Rand.php'); ?>


            </div><!-- End. content-single-movie -->


            <p class="tags"><?php the_tags(); ?> </p> 



            <!--?php comments_template(); // Get comments.php template ?-->


            <?php endwhile; else: ?>
            <p> <?php _e('Sorry, no posts matched your criteria.'); ?> </p>
            <?php endif; ?>
            <!-- END Loop -->


            <ul class="navigationarrows"> 
            <li class="previous">
            <?php previous_post_link('&laquo; %link'); ?>
            <?php if(!get_adjacent_post(false, '', true)) 
            { echo '<span>&laquo;Previous</span>'; } ?>
            </li>
            <li class="next">
            <?php next_post_link('%link &raquo;'); ?>
            <?php if(!get_adjacent_post(false, '', false)) { echo '<span>Next post:</span>'; } ?> 
            </li>
            </ul><!-- end . navigationarrows --> 

    </div>

 </main>
<?php get_footer();?>
postsfunctionspagespaginationwp-link-pages
2
alam7o

テーマが正しくbody_classテンプレートタグを使用している限り、WordPressはこれを処理するためにすでにボディにクラスを追加しています。

ページの2ページ目には、paged、paged-2、およびpage-paged-2という2つの追加クラスがあります。そのため、スタイルに合わせて変更を加えることができます。

body.page {
    background: black;
    color: white;
}

body.paged {
    background: green;
    color: red;
}

コアはこのロジックでこれを実現します。

global $wp_query;

$page = $wp_query->get( 'page' );

    if ( ! $page || $page < 2 )
        $page = $wp_query->get( 'paged' );

    if ( $page && $page > 1 && ! is_404() ) {
        $classes[] = 'paged-' . $page;

        if ( is_single() )
            $classes[] = 'single-paged-' . $page;
        elseif ( is_page() )
            $classes[] = 'page-paged-' . $page;
        elseif ( is_category() )
            $classes[] = 'category-paged-' . $page;
        elseif ( is_tag() )
            $classes[] = 'tag-paged-' . $page;
        elseif ( is_date() )
            $classes[] = 'date-paged-' . $page;
        elseif ( is_author() )
            $classes[] = 'author-paged-' . $page;
        elseif ( is_search() )
            $classes[] = 'search-paged-' . $page;
        elseif ( is_post_type_archive() )
            $classes[] = 'post-type-paged-' . $page;
}

最初のページとそれ以降のページで異なるHTMLを使用したい場合は、テンプレート内でこのロジックを調整できます。

0
Andy Macaulay-Brook

投稿IDがわかっている場合は、カスタムCSSを使用してその特定の本文をターゲットにできます。たとえば、カスタムページのIDが99の場合は、カスタムスタイルシートを設定して、すべてのセレクタに次のように付けることができます。

body.postid-99

明らかに、これはあなたのテーマによって異なります。あなたのテーマがbodyタグ内で別のクラス（.postid-99ではない）を使用しているなら、それに応じてセレクタを変更しなければならないでしょう。

...または...

テーマ関数に正しいスタイルシートをエンキューします。例えば：-

function my_enqueue_scripts(){
    wp_register_style( 'my-css', "my-stylesheet.css" );
    wp_enqueue_style( 'my-css' );
}

if ( get_the_ID() == 99 )
    add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts');

私は上記のコードをチェックしていませんが、うまくいけばそれはあなたがする必要がある場所を取得するのに役立ちます。

0
Michae Pavlos Michael

私が正しく理解しているならば、あなたは新しいページに別のテンプレートを作成したいです。

その場合は、テーマのsingle.phpを（できれば子テーマで）複製し、 テンプレート階層 を使用してデフォルトを上書きする必要があります。新しいものとsingle.php。

  1. これを行いたいページのIDを取得します
  2. ファイルsingle.phpを複製し、ページIDで "ID"を変更してsingle-ID.phpに名前を変更します。
  3. これでsingle-ID.phpを編集でき、変更はそのページにのみ適用されます。

複数のページに適用したい場合は、新しいテンプレートを作成して名前を追加することができます。それから、あなたはそれをidによってするのではなく、あなたが望むすべてのページのページ編集でそれを選ぶでしょう。これはあなたが使用しているテーマによって異なります。

0
lfreitas