WordPressにて
フロントページの表示を固定ページに変更。
news.phpを作成し、Template Name: News Topで作成しました。
以下がcodeです。
<?php
/*
Template Name: News Top
*/
?>
<?php get_header(); ?>
<?php get_template_part( 'news-slider' ); ?>
<div class="container">
<div class="contents">
<?php if(is_category() || is_tag()): ?>
<h1><?php single_cat_title() ?>の記事一覧</h1>
<?php elseif(is_year()): ?>
<h1><?php the_time("Y年") ?>の記事一覧</h1>
<?php elseif(is_month()): ?>
<h1><?php the_time("Y年m月") ?>の記事一覧</h1>
<?php endif; ?>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<!--kiji-listを呼び出し-->
<article <?php post_class( 'kiji-list' ); ?>>
<a href="<?php the_permalink(); ?>">
<!--画像を追加-->
<?php
if (has_post_thumbnail()) {
the_post_thumbnail( array(220,150) );
}else {
echo '<img src="' . get_bloginfo('template_directory') . '/img/no-image.gif' . '" width="150" height="150" alt="thumbnail" />';
}
?>
<div class="text">
<!--タイトル-->
<h2><?php the_title(); ?></h2>
<!--投稿日を表示-->
<span class="kiji-date">
<i class="fa fa-pencil"></i>
<time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
<?php echo get_the_date(); ?>
</time>
</span>
<!--カテゴリ-->
<?php if (!is_category()): ?>
<span class="cat-data">
<?php if( has_category() ): ?>
<?php $postcat=get_the_category(); echo $postcat[0]->name; ?>
<?php endif; ?>
</span>
<?php endif; ?>
<!--抜粋-->
<div class="kiji-excerpt">
<?php the_excerpt(); ?>
</div>
</div>
</a>
</article>
<!--ループ終了-->
<?php endwhile; endif; ?>
<div class="pagination">
<?php echo paginate_links( array(
'type' => 'list',
'mid_size' => '1',
'prev_text' => '«',
'next_text' => '»'
) ); ?>
</div>
</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
こちらがスライド(news-slider.php)です。
<div id="slider-area">
<div id="slides" class="slides">
<div id="slides-inner" class="slides-inner">
<?php $args = array(
'posts_per_page' => 5,
);
$my_query = new WP_Query( $args );?>
<?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
<article <?php post_class( 'slidekiji' ); ?>>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('large'); ?>
<div class="text">
<span class="kiji-date">
<i class="fa fa-pencil"></i>
<time
datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
<?php echo get_the_date(); ?>
</time>
</span>
<nobr><span class="cat-data ">
<?php if( has_category() ): ?>
<?php $postcat=get_the_category(); echo $postcat[0]->name; ?>
<?php endif; ?>
</span></nobr>
<h2><?php the_title(); ?></h2>
</div>
</a>
</article>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</div>
</div>
<div id="slides-nav" class="slides-nav"></div>
</div>
スライダーのjsです
jQuery(function($) {
jQuery('#slides').append('<ul id="pager"><li><a href="#" class="prev"><</a></li><li><a href="#" class="next">></a></li></ul>');
var jQuerypager = jQuery('#pager'),
jQueryslidesWrap = jQuery('#slides'),
jQueryslides = jQuery('#slides-inner'),
jQueryslideKiji = jQueryslides.find('.slidekiji'),
jQuerynav = jQuery('#slides-nav'),
current = 0,
number = jQueryslideKiji.length;
jQueryslideKiji.each(function(i) {
jQuery(this).css({
left: '100' * i + '%'
});
jQuerynav.append('<a href="#"></a>');
});
function navUpdate() {
jQuerynav.find('a').removeClass('active');
jQuerynav.find('a').eq(current).addClass('active');
}
function slider(index) {
if (index < 0) {
index = number - 1;
}
if (index > number - 1) {
index = 0;
}
jQueryslides.animate({
left: '-100' * index + '%'
});
current = index;
navUpdate();
}
jQuerypager.find('a').click(function(event) {
event.preventDefault();
if (jQuery(this).hasClass('prev')) {
slider(current - 1);
} else {
slider(current + 1);
}
});
jQuerynav.find('a').click(function(event) {
event.preventDefault();
var navIndex = jQuery(this).index();
navUpdate();
slider(navIndex);
});
var start;
function timerStart() {
start = setInterval(function() {
slider(current + 1);
}, 3000);
}
function timerStop() {
clearInterval(start);
}
slider(current);
timerStart();
jQueryslideKiji.on({
mouseover: timerStop,
mouseout: timerStart
});
});
他front-page.php やsingle.phpでも<?php get_template_part( 'news-slider' ); ?>を入れると、スライドは正常に動くのですがnews.phpのページだけ表示されません。何か改善方法はありますでしょうか?よろしくお願いします。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
まだ回答がついていません
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.33%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる