サポート » テーマ » 固定親ページに子ページを読み込みましたが、子ページにCSSが反映されな

  • http://ja.forums.wordpress.org/topic/1269

    こんにちは。ひたすら調べてみていたのですが、どうしてもわからなかったので
    質問させてください。

    上記トピックに書かれている方と同じようなことをしたかったので、トピックを見ながらやってみています。
    ページ内の<h3>と本文をパーツ化したく、子ページ用テンプレート(<h3>と本文部分を抜き出したもの)をphpファイル化し、固定ページを記述する時に選べるテンプレートに
    表示するようにしました。

    その結果、親ページに子ページが出力され、

    <3>固定 子ページ1</h3>
    本文
    <3>固定 子ページ2</h3>
    本文
    <3>固定 子ページ3</h3>
    本文

    …というように表示されるようになりました。
    そこまではよかったのですが…
    子ページ用テンプレートにはCSSのIDやクラスを書いているんですが、
    反映されていないんです。
    @import url を使ってstyle.cssを読み込んでみたのですが、URLがそのまま
    文字になって出てきてしまいます。
    ファイルはすべて、同じ階層に入れてあります。

    なぜ反映されていないのかがわかりません;
    どなたか教えていただけませんでしょうか。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • こんにちは、できればコードを載せて頂けませんか?

    トピック投稿者 Koko32

    (@koko32)

    mizube様
    お返事ありがとうございます。わかりづらいかもしれませんが、書いてみます。

    ~固定 親ページ~

    <?php get_header(); ?>
    <div id=”page”>
    <!– 子ページ読み込み始め –>
    <?php
    $child_posts = get_posts( ‘numberposts=-1&order=ASC&orderby=post_title&post_type=page&post_parent=’ . $post->ID );
    if ( $child_posts ) {
    foreach ( $child_posts as $child ) {
    $c_title = apply_filters( ‘the_title’, $child->post_title );
    $c_content = get_extended( $child->post_content );
    $c_content = apply_filters( ‘the_content’, $c_content[‘main’] );
    ?>
    <?php echo $c_title; ?>
    <div class=”entry”>
    <?php echo $c_content; ?>
    </div>
    <?php
    }
    }
    ?>
    <!– 子ページ読み込み終わり –>
    </div>
    <?php get_footer(); ?>

    ————————————————————–

    ~固定 子ページ~
    <?php
    /*
    Template Name: child
    */
    ?>
    <h3><?php the_title(); ?></h3>
    <p class=”txt”>
    <?php the_content(); ?>
    </p>

    ————————————————————–

    こんな感じです。
    親ページには、子ページのタイトル、本文は表示されていますが、
    CSSが適用されていません。
    親ページに書かれている

    <?php echo $c_title; ?>
    <div class=”entry”>
    <?php echo $c_content; ?>
    </div>

    上記の部分を

    <h3><?php echo $c_title; ?></h3>
    <div class=”entry txt”>
    <?php echo $c_content; ?>
    </div>

    とすると適用され、希望通りの表示になります。
    子ページに@importでCSSを読み込んでみたのですが適用されず…
    親ページのタグ部分ではなく、子ページにCSSを反映させ、
    それを読み込むという形を取りたいのですが、うまく行きません;

    コードの掲載ありがとうございます。

    こちらの解釈が勘違いだったらごめんなさい。固定ページ「子ページ」の編集画面の「ページ属性 > テンプレート」で設定したテンプレートを、固定ページ「親ページ」内で読み込みたい、ということでしょうか?

    現状そういうコードにはなってない(単に子ページのデータを引っ張ってきてループ内のHTMLにデータを埋め込んで出力してる)ので、コードの修正が必要です。また、現状のテンプレートを子ページに適用してると、子ページのURLにアクセスした時、そのテンプレートが適用されてしまい、パーツだけのページが表示されてしまいますので、あまりよろしくないと思います。

    例えば、以下のような方法はどうでしょうか。

    まず、子ページ用テンプレートである child.php (仮)を通常のテンプレートファイルのように作成し、子ページのテンプレートに設定します。中身は自由に変えても良いし、以下のように、デフォルトのテンプレート page.php を読み込むだけでもいいです。

    child.php (子ページ用テンプレート・仮名) :

    <?php
    /*
    Template Name: Child
    */
    get_template_part( 'page' );
    ?>

    次に、親ページの中で読み込ませるパーツだけのファイルを新しく作成します。このファイル名は、子ページ用テンプレートのファイル名 (child.php) の頭に何かキーワードをつけ、ハイフンで区切った名前にします。今回は part をつけ、part-child.php にしてみます。
    ※このへんのルールはなんでもいいのですが、子ページ用テンプレートのファイル名と子ページパーツのファイル名が何らかの形で対応している必要があります。

    part-child.php (子ページ用テンプレートに対応したファイル名の子ページパーツ・仮名):

    <h3><?php the_title(); ?></h3>
    <p class="txt">
    <?php the_content(); ?>
    </p>

    で、最後に、親ページのループに、子ページ用テンプレートに応じて、読み込む子ページパーツのファイルを変える、という処理を加えます。親ページもテンプレートにしておくといいですね。以下の親ページ用テンプレートを作成し、親ページのテンプレートに設定します。

    parent.php (親ページ用テンプレート・仮名) :

    <?php
    /*
    Template Name: Parent
    */
    get_header();
    ?>
    <div id="page">
    <?php
    $child_posts = get_posts( 'numberposts=-1&order=ASC&orderby=post_title&post_type=page&post_parent=' . $post->ID );
    if ( $child_posts ) {
      foreach ( $child_posts as $child ) {
        $c_title = apply_filters( 'the_title', $child->post_title );
        $c_content = get_extended( $child->post_content );
        $c_content = apply_filters( 'the_content', $c_content['main'] );
        // 子ページのページテンプレートのファイル名を取得
        $c_template = get_post_meta( $post->ID, '_wp_page_template', true );
        // part ファイルのパスを、ファイルの命名ルールに応じて設定
        $c_part = get_template_directory() . '/part-' . $c_template;
        // テンプレートがデフォルトでなく part ファイルが存在したら読み込む
        if ( $c_template != 'default' && file_exists( $c_part ) ) {
          // get_template_part() だと自前の変数には global 宣言がいるので include で
          include $c_part;
        } else {
          // テンプレート指定がない場合と、パーツファイルが存在しない場合
    ?>
    <?php echo $c_title; ?>
    <div class="entry">
    <?php echo $c_content; ?>
    </div>
    <?php
        }
      }
    } else {
      // 子ページが存在しない場合
    ?>
    <div class="entry">
    <p class="msg">これより下の階層のページはありません。</p>
    </div>
    <?php
    }
    ?>
    </div>
    <?php get_footer(); ?>

    いかがでしょう?

    すみません、訂正します。子ページのパーツファイル(part-child.php)はこの場合

    <h3><?php echo $c_title; ?></h3>
    <div class="txt">
    <?php echo $c_content; ?>
    </div>

    であるべきですね。失礼しました。

    トピック投稿者 Koko32

    (@koko32)

    mizube様

    お返事ありがとうございます。
    mizube様がおっしゃる通りです。
    固定ページ「子ページ」の編集画面のページ属性で、
    自分が作ったテンプレートを設定し、その子ページを親ページ内で読み込みたい、というものです。
    親ページに書かれているコードは、”子ページのタイトルと本文「のみ」を
    引っ張ってきている状態”だったのですね;
    たしかにそう教えていただくと、子ページのテンプレートに関する記述は
    何もないですね…;
    WPに触れて初心者用サイトなどでPHPを勉強し始めたのがかれこれ
    一週間前などで、個々のコードについてまだよくわかっていない部分が多々あるので、
    おそらく質問の仕方も、非常にわかりづらいかもしれませんが、
    意図を汲んでくださってありがたいです。

    コードを書いていただき、ありがとうございます…!
    子ページパーツテンプレートと子ページテンプレートを作り、それを親ページで合わせて読み込むことで1つとして表示させている、という感じでしょうか。
    教えていただいたコードを一つ一つ調べながら何をしているのか把握できるようにし、
    ちょっと試してみます…!

    ごめんなさい!

    // 子ページのページテンプレートのファイル名を取得
        $c_template = get_post_meta( $post->ID, '_wp_page_template', true );

    の部分ですが

    // 子ページのページテンプレートのファイル名を取得
        $c_template = get_post_meta( $child->ID, '_wp_page_template', true );

    に修正してください!
    $post->ID だと親ページのテンプレートをチェックしてしまいます。
    申し訳ありません。

    子ページパーツテンプレートと子ページテンプレートを作り、それを親ページで合わせて読み込むことで1つとして表示させている、という感じでしょうか。

    子ページテンプレートは、子ページにアクセスした時に表示するためのテンプレートで、子ページのパーツテンプレートは、親ページ内で読み込むテンプレートですね。

    私も、一案

    動作の条件、親ページのテンプレートパートファイルが、part.phpを読み込んでいること。

    固定ページ test.php

    <?php
    /**
     * Template Name: test
     *
     */
     $child_posts = get_posts( 'numberposts=-1&order=ASC&orderby=post_title&post_type=page&post_parent=' . $post->ID );
    
    if ( ! empty( $child_posts ) ) {
    
            foreach( $child_posts as $post ) {
                setup_postdata($post);
    
    			supply_child_template( );
    //引数に、'children'など、存在しないテンプレート名を指定すると、part.phpで表示されます。
            }
    
    		wp_reset_postdata( );
    }
    
    function supply_child_template( $child_template = 'child' ){
    	global $template;
    
    	$base_template_name = basename( $template, '.php' );
    
    	//親ページで読み込むテンプレートパートファイルが、part.phpの場合
    	//現在の固定ページ名_child.phpを読み込みます。
    	//テンプレートパートファイルが存在しなければ、part.phpを読み込みます
    
    	get_template_part( 'part', $base_template_name. '_'. $child_template );
    }

    part-test_child.php
    固定ページ名が、test.phpの場合、part-test_child.phpを作成し、以下の内容を記述します。

    <article>
    I'm child
    <h2 class="entry-title"><?php the_title();?></h2>
    
    <div class="entry-content"><?php the_content();?></div>
    </article>
7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「固定親ページに子ページを読み込みましたが、子ページにCSSが反映されな」には新たに返信することはできません。