サポート » 使い方全般 » 固定ページにトップページと同じテンプレートを適応したい

  • 解決済 nashikuzushi

    (@nashikuzushi)


    現在Fluxipressというテーマを使用しております。
    https://ja.wordpress.org/themes/fluxipress/

    こちら、トップページに記事の一覧がタイル状に並ぶ仕様となっております。
    この仕様を、固定ページにも適応したいと考えております。

    今まで行った作業は、
    1、固定ページに独自のテンプレートの適用
    http://goo.gl/bvVdMD
    2、index.phpの中身を上記テンプレートにコピー

    以上の2つを行いましたが、固定ページには記事一覧が表示されません。
    エラーではなく、何も表示されていない状態です。

    また、
    トップページ:「news」カテゴリーの記事一覧
    ブログページ(固定ページ):「blog」カテゴリーの記事一覧
    イベントページ(固定ページ):「event」カテゴリーの記事一覧
    プロジェクトページ(固定ページ):「project」カテゴリーの記事一覧

    と言う風に、カテゴリー別に記事を出し分けしたいです。
    画像イメージは下記となります。
    http://www.fastpic.jp/index.php?module=preview&file=5111164895.jpg

    色々調べたのですが解決策が見つかりませんでした…。
    以上を行うための具体的な手順をご教示いただければ幸いです。

    大変お手数ですがよろしくお願い致します。

15件の返信を表示中 - 1 - 15件目 (全19件中)
  • こんにちは、

    面白いテーマですね、トップページ等を固定ページに変更する WordPressのお決まりの方法では、カスタマイズできなさそうですね。

    固定ページに記事一覧が表示されないのは、一覧の投稿が、jsonとtemplate_redirectでロードされるようになっている事に関係ありそうですね。

    スタイル指定等も、gt-480 lt-640 lt-800 lt-1280 等 マニアックなクラスもあるみたいで、テーマの中身を一度全部読み込んで 独自の方法に対応したカスタマイズが必要なんじゃないかと思います。

    カテゴリーは、普通にトップページと同じようなレイアウトスタイルで表示できてるみたいですが…

    追記

    固定ページテンプレートを使わずに、home.php 又は、front-page.phpを使えば、出来るようですね。

    >> nobitaさん

    いつもご回答いただきありがとうございます。
    オシャレなテーマなので使っていきたいなーと思っております(^^)/

    >>固定ページテンプレートを使わずに、home.php 又は、front-page.phpを使えば、出来るようですね。

    こちらですが、ちょっとわからなかったです…

    最初の質問で記載したURLの、「各固定ページのページデザインをテンプレート選択で可能にする方法」で、固定ページのテンプレートを作成したのですが、こちらの方法ではないという事だとは思います。

    home.php又はfront-page.phpを使うとはどういう事でしょうか?
    具体的な方法をご教示いただければ大変ありがたいですm(__)m

    試しに、今まで「page-blog.php」としていた固定ページテンプレートを
    「home.php」にリネームしましたが、結果は同じでした…。

    以上となります。

    大変お手数ですがご確認の方よろしくお願い致します。

    nashikuzushiさん

    おそらくですが、コピーするだけでは難しいと思います。
    まず固定ページをテンプレートにするには、
    page-slug.phpファイルをつくり、一番先頭行に以下のソースを追加します。

    <?php
    /*
    Template Name: テンプレート名
    */
    ?>

    次にインデックス(index.php)からコピーしたソースを張り付けて保存してください。
    これをアップすると固定ページにテーマができます。
    (この時点では機能しないかトップと同じかどちらかだと思います。)

    次にループの変更です。
    基本的にメインループ(記事一覧)は「while~endwhile」又は「foreach~endforeach」のループで動いています。
    そのループにクエリーなどを入れてあげれば良いだけです。
    実際にはこんな感じでループを組みます。

    <?php
    $args = array(
    //query条件を定義
    );
    
    //メインループ
    if ( have_posts() ) :
    query_posts( $args );
    while ( have_posts() ) :
    the_post();
    ?>
    
     <p>投稿のループ</p>
    
    <?php endwhile; else: ?>
    
     <p>投稿がなかったときの処理</p>
    
    <?php
    endif;
    wp_reset_postdata();
    ?>

    さらに「$args」の値にクエリーを入れてくと

    $args = array(
    'category_name' => 'blog',
    );

    こんな感じで「$args」の部分を書き換えればよろしいと思います。

    これをさらに、トップに反映させたいならhome.php又はfront-page.phpにリネームして保存します。(設定がわからないので今回はfront-page.phpにするとよいかもしれません。)
    リネーム後、テンプレート部分を削除し、上書き保存してください。

    <?php
    /*
    Template Name: テンプレート名
    */
    ?>

    ↑これを消す。

    さらにループのクエリー部分を変更

    $args = array(
    'category_name' => 'news',
    );

    こんな感じでどうですかね?

    元のテンプレートのソース見てないんで適当に書いてしまいましたが
    ソースがわかれば、もう少し詳しくご回答できるかもしれません。

    >>mura0403さま

    ご回答ありがとうございます!
    本当に助かりますm(__)m

    ご回答いただいた通りにやってみたいのですが
    エラーが出てしまいました…。

    まず、元のindex.phpのソースは下記となります。

    <?php
    	get_header();
    
    	if(have_posts()) :
    
    		get_template_part('content', 'postlist');
    
    	else :
    
    		get_template_part('content', 'none');
    
    	endif;
    
    	get_footer();
    ?>

    今回、上記トップページと同じ見た目を固定ページにも実装したい(カテゴリで出しわけ)ので、固定ページのテンプレートを下記の様にしてみました。

    <?php
    /*
    Template Name: blog用
    */
    ?>
    <?php
    $args = array(
    'category_name' => 'blog',
    );
    
    //メインループ
    if ( have_posts() ) :
    query_posts( $args );
    while ( have_posts() ) :
    the_post();
    ?>
    
    get_template_part('content', 'postlist');
    
    <?php endwhile; else: ?>
    
     <p>投稿がなかったときの処理</p>
    
    <?php
    endif;
    wp_reset_postdata();
    ?>

    こうすると該当ページには
    get_template_part(‘content’, ‘postlist’);
    という文字列だけ表示されました…。

    ちなみに、「blog」というカテゴリーがあるので
    クエリー部分はそのまま「blog」にしております。

    phpやテンプレートの知識が希薄な
    初心者で申し訳ございません。

    大変お手数ですがご確認の方よろしくお願い致します。

    nashikuzushiさん

    get_template_part('content', 'postlist');

    このテンプレートパーツですが、記事があった時には
    「content-postlist.php」をよみなさいという命令文になります。

    もしかすると、「content-postlist.php」の方になにかIF文がある可能性がありますね。
    私個人的にはテンプレートパーツがあまり好きではないので
    get_template_part('content', 'postlist');」のかわりに「content-postlist.php」の中身をコピーしてカスタマイズすることもありますよ。

    >>固定ページテンプレートを使わずに、home.php 又は、front-page.phpを使えば、出来るようですね。

    こちらですが、ちょっとわからなかったです…

    1.mura0403さんが説明してくれている 固定ページテンプレートは、ページの編集画面から、テンプレートを選択して適用させる方法ですが、

    2.WordPressには、テンプレート階層に基づく(つまり、template名を一定のルールに沿って記述すると、その場面でテンプレートが自動的に適用させる)テンプレートというものもあります。

    1.は固定フロンページ設定で、トップページを指定しますよね。

    2.は、テンプレート名が、home.php 又は、front-page.php がテーマファイルの中にあると、トップページを開いた場合に、home.php,front-page.phpが自動的に適用されるという仕組みです。

    なので、

    <?php
    /*
    Template Name: テンプレート名
    */
    ?>

    2.の場合は、上記のようなコメントは必要ありません。

    両方ある場合は、front-page.phpが優先

    home.php と、front-page.phpの違い。

    セットされる投稿データが、index.phpと同じなのが、home.php
    セットされる投稿データが、固定ページなのが、front-page.phpです。

    なので、index.phpをhome.phpにコピーして表示すると、home.phpが、トップページ用に使われます。

    通常は、どちらでもうまく動きますが、このテーマの場合は、1の固定ページテンプレートを適用すると、表示が正常に行われないようだったので、front-page.php、だと表示できますよという意味で書きました
    home.phpまたは、front-page.php に以下のコードで動きます。

    <?php
    	get_header();
    
    	if(have_posts()) :
    
    		get_template_part('content','postlist');
    
    	else :
    
    		get_template_part('content', 'none');
    
    	endif;
    
    	get_footer();
    ?>

    以下は、動かないです

    ここら辺に、余計な(htmlやたぶんスペースなど)ものが混入していると表示しません
    <?php
    	get_header();
    
    	if(have_posts()) :
    
    		get_template_part('content','postlist');
    
    	else :
    
    		get_template_part('content', 'none');
    
    	endif;
    
    	get_footer();
    ?>

    あれ、勘違いしている自分に気づいたかも、、、、、

    固定ページを、トップページと同じ表示にしたいんですね

    ごめんなさいね、ちょっと白旗かも、、、

    nashikuzushiさん

    検証して居ないのですが、フロントページ用PHPです。
    良かったら試してみてください。
    ファイル名:front-page.php

    <?php get_header();//ヘッダー読み込み ?>
    
    <?php
    if(have_posts()) ://もし記事があったら
    //ポストリスト開始▼
    ?>
    
    		<div id="post-list" class="clear">
    			<div id="col1" class="col"></div>
    			<div id="col2" class="col"></div>
    			<div id="col3" class="col"></div>
    			<div id="col4" class="col"></div>
    <?php
    $i = 0;
    $args = array(
    'category_name' => 'news'
    );
    query_posts( $args );
    while(have_posts()) :
    the_post();
    $displayExcerpt = (bool) get_theme_mod('fluxipress_display_excerpts', true);
    $displayMoreLink = (bool) get_theme_mod('fluxipress_display_more', true);
    
    $classes = array();
    if(!$displayExcerpt) $classes[] = 'no-excerpt';
    if(!$displayMoreLink) $classes[] = 'no-more';
    ?>
    			<div id="post-<?php echo $i++; ?>" <?php post_class(implode(' ', $classes)); ?> title="<?php echo htmlspecialchars(strip_tags(get_the_title())); ?>">
    				<?php if(is_sticky()) : ?><span class="sticky-icon"></span><?php endif; ?>
    				<?php if(!$displayMoreLink) : ?><a href="<?php the_permalink(); ?>" title="<?php echo htmlspecialchars(strip_tags(get_the_title())); ?>" class="no-more"><?php endif; ?>
    				<?php the_post_thumbnail('medium', array('class' => 'post-thumb', 'alt' => htmlspecialchars(strip_tags(get_the_title())))); ?>
    				<h2><?php the_title(); ?></h2>
    				<?php if($displayExcerpt) : ?><span><?php echo strip_tags(get_the_excerpt(), '<strong><em>'); ?></span><?php endif; ?>
    				<?php if($displayMoreLink) : ?><span class="tr"><a href="<?php the_permalink(); ?>" title="<?php echo htmlspecialchars(strip_tags(get_the_title())); ?>"><?php echo get_theme_mod('fluxipress_more_link', __('more&hellip;', 'fluxipress')); ?></a></span><?php endif; ?>
    				<?php if(!$displayMoreLink) : ?></a><?php endif; ?>
    			</div>
    <?php
    		endwhile;
    ?>
    		</div>
    
    		<?php if((bool) get_theme_mod('fluxipress_infinite_scroll', false)) : ?>
    		<div id="loading-icon">
    			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="64" height="64" fill="<?php echo htmlspecialchars(get_theme_mod('fluxipress_highlight_color', '#ff0099')); ?>">
    				<circle cx="16" cy="3" r="0"><animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline"/></circle>
    				<circle transform="rotate(45 16 16)" cx="16" cy="3" r="0"><animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.125s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline"/></circle>
    				<circle transform="rotate(90 16 16)" cx="16" cy="3" r="0"><animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.25s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline"/></circle>
    				<circle transform="rotate(135 16 16)" cx="16" cy="3" r="0"><animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.375s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline"/></circle>
    				<circle transform="rotate(180 16 16)" cx="16" cy="3" r="0"><animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline"/></circle>
    				<circle transform="rotate(225 16 16)" cx="16" cy="3" r="0"><animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.625s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline"/></circle>
    				<circle transform="rotate(270 16 16)" cx="16" cy="3" r="0"><animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.75s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline"/></circle>
    				<circle transform="rotate(315 16 16)" cx="16" cy="3" r="0"><animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.875s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline"/></circle>
    				<circle transform="rotate(180 16 16)" cx="16" cy="3" r="0"><animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline"/></circle>
    			</svg>
    
    		</div>
    		<?php endif; ?>
    
    		<?php
    			global $posts_per_page, $wp_query;
    			$paged = get_query_var('paged') ? get_query_var('paged') : 1;
    			if($wp_query->found_posts > $posts_per_page || $paged > 1) :
    		?>
    		<div id="post-navi">
    			<div class="prev"><?php next_posts_link(__('&laquo;&nbsp;Older posts', 'fluxipress')); ?></div>
    			<div class="next"><?php previous_posts_link(__('Newer posts&nbsp;&raquo;', 'fluxipress')); ?></div>
    		</div>
    		<?php endif; ?>
    
    <?php //▲ENDポストリストの中身 ?>
    
    <?php
    else ://記事がなかったときの処理
    get_template_part('content', 'none');
    endif;//記事の有無判定終了
    ?>
    <?php get_footer(); //フッター読み込み ?>

    やっとわかりました

    <?php
    /**
     * Template Name: test
     */
    $posts_per_page = 10;
    
    $paged = get_query_var( 'paged' );
    
    if ( empty( $paged ) ) {
    
    	$paged = 1;
    }
    
    if ( !isset( $posts_per_page ) ) {
    
    	$posts_per_page = get_option( 'posts_per_page' );
    }
    
    $args = array( 'posts_per_page' => $posts_per_page,
    	'paged'			 => $paged
    );
    
    query_posts( $args );
    
    get_header();
    
    if ( have_posts() ) :
    
    	get_template_part( 'content', 'postlist' );
    
    else :
    
    	get_template_part( 'content', 'none' );
    
    endif;
    
    get_footer();
    ?>

    あ、おんなじですね

    >>mura0403さん

    ご回答ありがとうございます。

    こちらですが、
    「トップページをindex.phpではなくfront-page.phpを使いたい時」
    に使用するソースになるのでしょうか?

    トップページを固定ページにしたいわけではなく
    固定ページにトップページのデザインを踏襲したい次第です。(カテゴリで出し分け)
    (ご理解いただいていたらすみません…」

    私の知識不足で色々とご迷惑をおかけしております。
    よろしくお願い致します。

    >>nobitaさん

    ありがとうございます(^^)/

    こちらを、以前私が作成しました固定ページテンプレート
    「page-blog.php」に全てコピーしました。

    そして、管理画面の固定ページで
    「test」というテンプレートを選択すると
    見事に、トップページと同じデザインが
    blog.htmlにも表示されました!

    ありがとうございます!

    後は、blog.htmlに出すカテゴリーを
    「blog」カテゴリーのみに絞りたいのですが
    それは、どのようにおこなうのでしょうか?

    query_posts( $args );

    の()の中の「&args」を消して
    「’cat=2’」を入れると
    blogカテゴリーのみ表示されたのですが
    デザインがちょっと変わってしまいました。
    具体的には、上部マージンが消えてしまいました。

    以上となります。

    大変お手数ですがご確認の方よろしくお願い致します。

    マージンの問題は

    style.css line 221

    .home #post-list {
        padding-top: 4.4rem;
    }

    bodyの homeクラスが指定されている影響だと思いますので、ご自身の環境に合わせて適切なクラスを選んでください。

    >>nobitaさん

    ご回答ありがとうございます。
    マージンの件も解決いたしました。
    初歩的な質問で大変失礼いたしました。

    大分見た目も整理できたのですが、
    最後に1点質問させてください。

    デフォルトで入っている、特定のcssとjsを読み込まないようにしたいのですが
    どのように行うのでしょうか?
    こちらのcssとjsは、親のfunction.cssで指定していると思われます。

    当方子テーマを使用しておりますので、親のテーマに変更は加えたくなく
    cssの様に上書きする方法がわからなくて悩んでおります。

    下記方法で試みたのですが上手くいきませんでした。
    http://keikenchi.com/wordpress-haed-css-js-disable

    ファイルの場所は、
    「css」
    ../wp-content/themes/fluxipress/css/magnific-popup.css
    「js」
    …/wp-content/themes/fluxipress/js/jquery.magnific-popup.min.js

    画像がポップアップするjsとなります。

    別で画像系のプラグインを入れたのですが
    上記jsも有効になっているため、二重に画像が開いてしまいます…

    大変お手数ですがご確認の方よろしくお願い致します。

    基本は、functions.php内で wp_enqueue_scripts アクションフックを使います。

    wp_enqueue_scripts フックを使う理由は、確実な動作のためです。

    プライオリティの数値を、大きめにするのがコツです。
    このテーマでは、

    add_action('wp_enqueue_scripts', 'fluxipress_add_scripts', 11);

    が使われているので、12を使います。

    コアのスクリプトを外すような場合は、タイミングを遅らすために、wp_print_scripts
    などを使うこともあるかもしれません。

    未テスト

    add_action('wp_enqueue_scripts', 'child_fluxipress_remove_style_script', 12 );
    
    function child_fluxipress_remove_style_script(){
    
    	wp_dequeue_style('fluxipress-css-magnific');
    	wp_dequeue_script('fluxipress-js-magnific');
    }

15件の返信を表示中 - 1 - 15件目 (全19件中)
  • トピック「固定ページにトップページと同じテンプレートを適応したい」には新たに返信することはできません。