120

CSSでカルーセルスライダー

WordPress

WordPressのテーマ、ストークではトップページにカルーセルスライダーを簡単に設置できる。

pickup というタグが付いている記事が、順に横に流れるように表示される。

このスライダー機能には、Jquery が使用されている。

 

このスライダーをjs なしでCSSだけで実現できないかと模索してみた。

 

parts_homeheader.php 等のスライダーを表示したい場所に、次のように記述する。

<?php if ( is_front_page() || is_home() ) : ?>
<?php		  
$args = array(
    'posts_per_page' => 13,
    'offset' => 0,
    'tag' => 'pickup',
    'meta_key' => 'views',
    'orderby' => 'meta_value_num',
    'order' => 'DESC',
    'post_type' => array('post','page'),
    'post_status' => 'publish',
    'suppress_filters' => true,
    'ignore_sticky_posts' => true,
    'no_found_rows' => true
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) {
$count=1; // ループの前に最初の数字を代入
	?>

<div id="top_carousel" class="css-sliderwrap carouselwrap wrap cf">

<!-- スライダー部 -->
<div id="stage">
	<input id="r1" type="radio" name="slider8">
	<input id="r2" type="radio" name="slider8">
	<input id="r3" type="radio" name="slider8">
	<input id="r4" type="radio" name="slider8">
	<input id="r5" type="radio" name="slider8">
	<input id="r6" type="radio" name="slider8">
	<input id="r7" type="radio" name="slider8">
	<input id="r8" type="radio" name="slider8">
	
  <!-- スライド群 -->
<ul id="photos" class="css-slider-li">

<?php while ( $the_query->have_posts() ) {
$the_query->the_post();
?>
<li id="photo<?php echo $count;?>" class="pic">

<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
<?php
$cat = get_the_category();
$cat = $cat[0];
?>
<?php if ( has_post_thumbnail()) : ?>
<?php $post_title= get_the_title(); ?>
<figure class="eyecatch">
<?php the_post_thumbnail('wpp348x208', array( 'alt' => $post_title,'title' => $post_title )); ?>
<span class="wpp-views"><?php if(function_exists('the_views')) { the_views(); } ?></span>
<span class="osusume-label cat-name cat-id-<?php echo $cat->cat_ID;?>"><?php echo $cat->name; ?></span>
</figure>
<?php else: ?>
<figure class="eyecatch noimg">
<img src="<?php echo get_template_directory_uri(); ?>/library/images/noimg.png">
<span class="wpp-views"><?php if(function_exists('the_views')) { the_views(); } ?></span>
<span class="osusume-label cat-name cat-id-<?php echo $cat->cat_ID;?>"><?php echo $cat->name; ?></span>
</figure>
<?php endif; ?>
<h2 class="h2 entry-title"><?php the_title(); ?></h2>
</a></li>
<?php 
$count  ; // 次のループの前に数字を増やす
} ; ?>
</ul>
  <!-- スライダー部の高さ確保 -->
  <div  class="padding-top"></div>
  <!-- スライドボタン -->
  <div id="btns">
  	<label for="r1" id="btn1" class="p_bar"></label>
  	<label for="r2" id="btn2" class="p_bar"></label>
  	<label for="r3" id="btn3" class="p_bar"></label>
  	<label for="r4" id="btn4" class="p_bar"></label>
  	<label for="r5" id="btn5" class="p_bar"></label>
  	<label for="r6" id="btn6" class="p_bar"></label>
  	<label for="r7" id="btn7" class="p_bar"></label>
  	<label for="r8" id="btn8" class="p_bar"></label>
    <!-- 位置表示バー -->
    <div id="p_btn"></div>
  </div>
  <!-- ボタン部の高さ確保 -->
  <div style="padding-top:2%;"></div>

</div>
</div>
<?php }
wp_reset_postdata();
?>
<?php endif; ?>

 

'meta_key' => 'views',

'orderby' => 'meta_value_num',

については、次を参照。

カタカナとひらがなの区別検索、人気順ソート WordPress
WordPressの標準の検索フォームから「バス」で検索すると、パスタの「パス」、ひらがなの「ばす」「はす」でもヒットすることに気づいて改善を試みた。ひらがなとカタカナは区別したい。乗り物のバスを検索しているのに、パスタの記事が出てきては混乱する。そうすると、最初は検索結果で332件ヒットしていたのが、179件に減ってスッキリした。Custom Post Order プラグインを使うと検索結果の順番がおかしくなる最初は検索結果の表示順もおかしかった。最初の方の記事に、「バス」の語句が全く含まれていない。検索語句の重要度と無関...
信旅
 
https://makotoiwasaki.com/カタカナとひらがなの区別検索.html

 

CSSを追加する。

/* CSSスライダー*/
.carouselwrap {
  background-color: transparent;
  width: 100%;
  max-width: 1490px;
  border-radius: 22px;
  max-height: 296px;
}

.carouselwrap a {
  display: block;
  text-decoration: none;
  color: #444;
	    padding: 0;
	    margin-right: 1px;
}
div#top_carousel figure.eyecatch {
  max-width: 293px;
    max-height: 208px;
    position: relative;
}
.carouselwrap .entry-title {
    width: auto;
    font-size: .9em;
}

body{
	counter-reset: cssslider;
}
div#top_carousel figure.eyecatch::before {
    counter-increment: cssslider;
    content: counter(cssslider);
    background: #000000;
    margin-right: 3px;
    color: #fff;
    width: 1.5em;
    height: 1.5em;
    font-size: 0.55em;
    font-weight: 300;
    display: block;
    text-align: center;
    line-height: 1.5em;
    position: absolute;
    left: 0;
    top: 0;
    background: #006400;
    color: #ffffff;
    z-index: 1;
}
/* スライダー部（#leftcolomnのwidth;0;の時はwidth:100%;） */
#stage {
    position: relative;
    /* width: 90%; */
    background: #F8F2F2;
    overflow: hidden;
    border-radius: 10%;
    margin: 0 auto;
}
/* スライド群 */
#photos {
	position: absolute;
	width: 100%;
	left:0%;
	top:0px;
	transition:left 1s ease;
	animation:transtoright0 32s linear infinite;animation-delay:1s;
}
.pic {
	width:20%;
	position:absolute;
}
.pic img { width:94%; }
#photo1 { left:0%; }
#photo2 { left:20%; }
#photo3 { left:40%; }
#photo4 { left:60%; }
#photo5 { left:80%; }
#photo6 { left:100%; }
#photo7 { left:120%; }
#photo8 { left:140%; }
#photo9 { left:160%; }
#photo10 { left:180%; }
#photo11 { left:200%; }
#photo12 { left:220%; }
#photo13 { left:240%; }
/* スライドボタン・位置表示バー */
#btns { width:20%;margin:0 auto;position:relative; }
.p_bar { display:block;width:10%;height:8px;background:#aaa; }
.p_bar { position:absolute;top:8px; }
.p_bar:hover { cursor:pointer; }
#p_btn { display:block;width:10%;height:8px;background:#f00;z-index:20;position:absolute;top:8px; }

#btn1 { left:0%; }
#btn2 { left:12%; }
#btn3 { left:24%; }
#btn4 { left:36%; }
#btn5 { left:48%; }
#btn6 { left:60%; }
#btn7 { left:72%; }
#btn8 { left:84%; }
#p_btn { left:0%; transition:left 1s ease; animation:bar_position0 32s linear infinite;animation-delay:1s;pointer-events : none; }

#r1,#r2,#r3,#r4,#r5,#r6,#r7,#r8 { display:none; }

/* スライドボタンクリック時のスライド群のanimation設定 */
#r1:checked ~ #photos { left:1%;   animation:transtoright1 32s linear infinite;animation-delay:1s; }
#r2:checked ~ #photos { left:-19%; animation:transtoright2 32s linear infinite;animation-delay:1s; }
#r3:checked ~ #photos { left:-39%; animation:transtoright3 32s linear infinite;animation-delay:1s; }
#r4:checked ~ #photos { left:-59%; animation:transtoright4 32s linear infinite;animation-delay:1s; }
#r5:checked ~ #photos { left:-79%; animation:transtoright5 32s linear infinite;animation-delay:1s; }
#r6:checked ~ #photos { left:-99%; animation:transtoright6 32s linear infinite;animation-delay:1s; }
#r7:checked ~ #photos { left:-119%; animation:transtoright7 32s linear infinite;animation-delay:1s; }
#r8:checked ~ #photos { left:-139%; animation:transtoright8 32s linear infinite;animation-delay:1s; }
/* スライドボタンクリック時の位置表示バーのanimation設定 */
#r1:checked ~ #btns #p_btn { left:0%; animation-play-state:running; animation:bar_position1 32s linear infinite; animation-delay:1s; }
#r2:checked ~ #btns #p_btn { left:12%;animation:bar_position2 32s linear infinite; animation-delay:1s; animation-play-state:running;  }
#r3:checked ~ #btns #p_btn { left:24%; animation:bar_position3 32s linear infinite; animation-delay:1s; animation-play-state:running; }
#r4:checked ~ #btns #p_btn { left:36%; animation-play-state:running; animation:bar_position4 32s linear infinite; animation-delay:1s; }
#r5:checked ~ #btns #p_btn { left:48%; animation-play-state:running; animation:bar_position5 32s linear infinite; animation-delay:1s; }
#r6:checked ~ #btns #p_btn { left:60%; animation:bar_position6 32s linear infinite; animation-delay:1s; }
#r7:checked ~ #btns #p_btn { left:72%; animation:bar_position7 32s linear infinite; animation-delay:1s; }
#r8:checked ~ #btns #p_btn { left:84%; animation:bar_position8 32s linear infinite; animation-delay:1s; }
/* クリックされたスライドボタンの再クリック不能を示す */
#r1:checked ~ #btns #btn1,#r2:checked ~ #btns #btn2,#r3:checked ~ #btns #btn3,#r4:checked ~ #btns #btn4,#r5:checked ~ #btns #btn5,#r6:checked ~ #btns #btn6,#r7:checked ~ #btns #btn7,#r8:checked ~ #btns #btn8 { opacity:0.4; cursor:auto;}
/* スライド群のanimation */
@keyframes transtoright0 {
	0%    { left:1%; }
	10%   { left:1%; }
	12.5% { left:-19% }
	22.5% { left:-19% }
	25%   { left:-39% }
	35%   { left:-39% }
	37.5% { left:-59% }
	47.5% { left:-59% }
	50%   { left:-79% }
	60%   { left:-79% }
	62.5% { left:-99% }
	72.5% { left:-99% }
	75%   { left:-119% }
	85%   { left:-119% }
	87.5% { left:-139% }
	97.5% { left:-139% }
	99.9999% { left:-159% }
	100%  { left:1%; }
}
@keyframes transtoright1 {
	0%    { left:1%; }
	10%   { left:1%; }
	12.5% { left:-19% }
	22.5% { left:-19% }
	25%   { left:-39% }
	35%   { left:-39% }
	37.5% { left:-59% }
	47.5% { left:-59% }
	50%   { left:-79% }
	60%   { left:-79% }
	62.5% { left:-99% }
	72.5% { left:-99% }
	75%   { left:-119% }
	85%   { left:-119% }
	87.5% { left:-139% }
	97.5% { left:-139% }
	99.9999% { left:-159% }
	100%  { left:1%; }
}
@keyframes transtoright2 {
	0%    { left:-19%; }
	10%   { left:-19%; }
	12.5% { left:-39% }
	22.5% { left:-39% }
	25%   { left:-59% }
	35%   { left:-59% }
	37.5% { left:-79% }
	47.5% { left:-79% }
	50%   { left:-99% }
	60%   { left:-99% }
	62.5% { left:-119% }
	72.5% { left:-119% }
	75%   { left:-139% }
	85%   { left:-139% }
	87.4999% { left:-159% }
	87.5% { left:1% }
	97.5% { left:1% }
	100%  { left:-19%; }
}
@keyframes transtoright3 {
	0%    { left:-39%; }
	10%   { left:-39%; }
	12.5% { left:-59% }
	22.5% { left:-59% }
	25%   { left:-79% }
	35%   { left:-79% }
	37.5% { left:-99% }
	47.5% { left:-99% }
	50%   { left:-119% }
	60%   { left:-119% }
	62.5% { left:-139% }
	72.5% { left:-139% }
	74.9999% { left:-159% }
	75%   { left:1% }
	85%   { left:1% }
	87.5% { left:-19% }
	97.5% { left:-19% }
	100%  { left:-39%; }
}
@keyframes transtoright4 {
	0%    { left:-59%; }
	10%   { left:-59%; }
	12.5% { left:-79% }
	22.5% { left:-79% }
	25%   { left:-99% }
	35%   { left:-99% }
	37.5% { left:-119% }
	47.5% { left:-119% }
	50%   { left:-139% }
	60%   { left:-139% }
	62.4999% { left:-159% }
	62.5% { left:1% }
	72.5% { left:1% }
	75%   { left:-19% }
	85%   { left:-19% }
	87.5% { left:-39% }
	97.5% { left:-39% }
	100%  { left:-59%; }
}
@keyframes transtoright5 {
	0%    { left:-79%; }
	10%   { left:-79%; }
	12.5% { left:-99% }
	22.5% { left:-99% }
	25%   { left:-119% }
	35%   { left:-119% }
	37.5% { left:-139% }
	47.5% { left:-139% }
	49.9999% { left:-159% }
	50%   { left:1% }
	60%   { left:1% }
	62.5% { left:-19% }
	72.5% { left:-19% }
	75%   { left:-39% }
	85%   { left:-39% }
	87.5% { left:-59% }
	97.5% { left:-59% }
	100%  { left:-79%; }
}
@keyframes transtoright6 {
	0%    { left:-99%; }
	10%   { left:-99%; }
	12.5% { left:-119% }
	22.5% { left:-119% }
	25%   { left:-139% }
	35%   { left:-139% }
	37.4999% { left:-159% }
	37.5% { left:1% }
	47.5% { left:1% }
	50%   { left:-19% }
	60%   { left:-19% }
	62.5% { left:-39% }
	72.5% { left:-39% }
	75%   { left:-59% }
	85%   { left:-59% }
	87.5% { left:-79% }
	97.5% { left:-79% }
	100%  { left:-99%; }
}
@keyframes transtoright7 {
	0%    { left:-119%; }
	10%   { left:-119%; }
	12.5% { left:-139% }
	22.5% { left:-139% }
	24.9999% { left:-159% }
	25%   { left:1% }
	35%   { left:1% }
	37.5% { left:-19% }
	47.5% { left:-19% }
	50%   { left:-39% }
	60%   { left:-39% }
	62.5% { left:-59% }
	72.5% { left:-59% }
	75%   { left:-79% }
	85%   { left:-79% }
	87.5% { left:-99% }
	97.5% { left:-99% }
	100%  { left:-119%; }
}
@keyframes transtoright8 {
	0%    { left:-139%; }
	10%   { left:-139%; }
	12.4999% { left:-159% }
	12.5% { left:1% }
	22.5% { left:1% }
	25%   { left:-19% }
	35%   { left:-19% }
	37.5% { left:-39% }
	47.5% { left:-39% }
	50%   { left:-59% }
	60%   { left:-59% }
	62.5% { left:-79% }
	72.5% { left:-79% }
	75%   { left:-99% }
	85%   { left:-99% }
	87.5% { left:-119% }
	97.5% { left:-119% }
	100%  { left:-139%; }
}
/* 位置表示バーのanimation */
@keyframes bar_position0 {
	0% { left:0%; }
	10% { left:0% }
	12.5% { left:12%; }
	22.5% { left:12%; }
	25%   { left:24% }
	35%   { left:24% }
	37.5% { left:36% }
	47.5% { left:36% }
	50%   { left:48% }
	60%   { left:48% }
	62.5% { left:60% }
	72.5% { left:60% }
	75%   { left:72% }
	85%   { left:72% }
	87.5% { left:84% }
	97.5% { left:84% }
	100%  { left:0%; }
}
@keyframes bar_position1 {
	0% { left:0%; }
	10% { left:0% }
	12.5% { left:12%; }
	22.5% { left:12%; }
	25%   { left:24% }
	35%   { left:24% }
	37.5% { left:36% }
	47.5% { left:36% }
	50%   { left:48% }
	60%   { left:48% }
	62.5% { left:60% }
	72.5% { left:60% }
	75%   { left:72% }
	85%   { left:72% }
	87.5% { left:84% }
	97.5% { left:84% }
	100%  { left:0%; }
}
@keyframes bar_position2 {
	0% { left:12%; }
	10% { left:12% }
	12.5% { left:24%; }
	22.5% { left:24%; }
	25%   { left:36% }
	35%   { left:36% }
	37.5% { left:48% }
	47.5% { left:48% }
	50%   { left:60% }
	60%   { left:60% }
	62.5% { left:72% }
	72.5% { left:72% }
	75%   { left:84% }
	85%   { left:84% }
	87.5% { left:0% }
	97.5% { left:0% }
	100%  { left:12%; }
}
@keyframes bar_position3 {
	0% { left:24%; }
	10% { left:24% }
	12.5% { left:36%; }
	22.5% { left:36%; }
	25%   { left:48% }
	35%   { left:48% }
	37.5% { left:60% }
	47.5% { left:60% }
	50%   { left:72% }
	60%   { left:72% }
	62.5% { left:84% }
	72.5% { left:84% }
	75%   { left:0% }
	85%   { left:0% }
	87.5% { left:12% }
	97.5% { left:12% }
	100%  { left:24%; }
}
@keyframes bar_position4 {
	0% { left:36%; }
	10% { left:36% }
	12.5% { left:48%; }
	22.5% { left:48%; }
	25%   { left:60% }
	35%   { left:60% }
	37.5% { left:72% }
	47.5% { left:72% }
	50%   { left:84% }
	60%   { left:84% }
	62.5% { left:0% }
	72.5% { left:0% }
	75%   { left:12% }
	85%   { left:12% }
	87.5% { left:24 }
	97.5% { left:24 }
	100%  { left:36%; }
}
@keyframes bar_position5 {
	0% { left:48%; }
	10% { left:48% }
	12.5% { left:60%; }
	22.5% { left:60%; }
	25%   { left:72% }
	35%   { left:72% }
	37.5% { left:84% }
	47.5% { left:84% }
	50%   { left:0% }
	60%   { left:0% }
	62.5% { left:12% }
	72.5% { left:12% }
	75%   { left:24% }
	85%   { left:24% }
	87.5% { left:36% }
	97.5% { left:36% }
	100%  { left:48%; }
}
@keyframes bar_position6 {
	0% { left:60%; }
	10% { left:60% }
	12.5% { left:72%; }
	22.5% { left:72%; }
	25%   { left:84% }
	35%   { left:84% }
	37.5% { left:0% }
	47.5% { left:0% }
	50%   { left:12% }
	60%   { left:12% }
	62.5% { left:24% }
	72.5% { left:24% }
	75%   { left:36% }
	85%   { left:36% }
	87.5% { left:48% }
	97.5% { left:48% }
	100%  { left:60%; }
}
@keyframes bar_position7 {
	0% { left:72%; }
	10% { left:72% }
	12.5% { left:84%; }
	22.5% { left:84%; }
	25%   { left:0% }
	35%   { left:0% }
	37.5% { left:12% }
	47.5% { left:12% }
	50%   { left:24% }
	60%   { left:24% }
	62.5% { left:36% }
	72.5% { left:36% }
	75%   { left:48% }
	85%   { left:48% }
	87.5% { left:60% }
	97.5% { left:60% }
	100%  { left:72%; }
}
@keyframes bar_position8 {
	0% { left:84%; }
	10% { left:84% }
	12.5% { left:0%; }
	22.5% { left:0%; }
	25%   { left:12% }
	35%   { left:12% }
	37.5% { left:24% }
	47.5% { left:24% }
	50%   { left:36% }
	60%   { left:36% }
	62.5% { left:48% }
	72.5% { left:48% }
	75%   { left:60% }
	85%   { left:60% }
	87.5% { left:72% }
	97.5% { left:72% }
	100%  { left:84%; }
}

.padding-top {
    padding-top: 264px;
}

div#top_carousel {
    margin-bottom: 1em;
}
.carouselwrap .eyecatch img {
  border-radius: 8px;
  width: 100%;
    max-width: 293px;
    max-height: 208px;
}
@media only screen and (max-width: 767px) {
.carouselwrap .entry-title {
    width: auto;
    font-size: .7em;
    font-weight: 200;
}
.padding-top {
    padding-top: 23.5%;
}
.pic {
    width: 20%;
    position: absolute;
}
.carouselwrap .eyecatch img {
    max-width: 220px;
    max-height: 86px;
}
.post-list-card .post-list .description {
    font-size: .9em;
    line-height: 1.5em;
display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}
}
@media only screen and (max-width: 440px) {
.carouselwrap .eyecatch img {
    max-width: 220px;
    max-height: 86px;
}
	.carouselwrap .entry-title {
    width: auto;
    font-size: .6em;
    font-weight: 200;
}
	.padding-top {
    padding-top: 126px;
}
img.size-large {
    border-radius: 0;
}
.post-list-card .post-list .description {
    font-size: .9em;
    line-height: 1.5em;
display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}
	}

/* スライダー終わり*/

 

スライダーに表示したい記事に pickup というタグをつける。

最大13記事まで。

 

以上でこのサイトのトップページのスライダーのように表示される。

 

参考：

複数画像移動型スライダー | css だけで作る フォトギャラリー・スライドショー
　ヘッダー部分に設置するスライダーは従来一つのスライドが入れ替わるものが多いが、サイトによっては、いくつかのスライドを水平に並べて表示し、全体がスライドして入れ替わるものも見受けられる。ここでは、全体を８枚のスライドとし、その内５枚のスライドを標示するタイプのものについて作成した。それぞれの枚数については、作成するサイトに応じて決めればよく、このサンプルを応用して頂ければと思う。 　オールインワン型にすると、CSSの記述がかなり煩雑になるのと、この種のスライダーの場合そこまでしなくても実用上十分...
css.programming.jp
 
http://css.programming.jp/?p=1266

 

  • 112
    2679年11月5日
    WordPress

    Let’s Encrypt SSL証明書の期限切れ対策 certbot を使う

    またまたこのサイトのSSL証明書が期限切れになった。 Kusanagi の自動更新ができていない。 それで手動であれこれしてみても、こんなエラーが出る。＃ kusanagi update cert Challenge failed for domain makotoiwasaki.com Challenge failed for domain www.makotoiwasaki.com Attempting to renew cert (makotoiwasaki.com) from /etc/letsencrypt/renewal/makotoiwasaki.com.conf produced an unexpected error: Some challenges hav...
    ... >> つづき
  • 223
    2679年9月3日
    WordPress

    Google Indexing API プラグイン WordPress by Rank Math

    Google の Indexing API を使うと、新しい投稿記事を瞬時にGoogleの検索エンジンに登録できる。 WordPress のプラグインとしてインデックスAPIが利用できる。使い方は英語だが、この通り： ⏱️ Get Google To Index Your Website Instantly Using the Indexing API ⚡Take a look at how you can use Google's new indexing API & to get your website's pages and content crawled instantly instead of waiting for Google to...
    ... >> つづき
  • 15
    2679年9月3日
    WordPress

    検索結果スニペット、抜粋 get_the_excerpt の設定

    Yoast SEO を停止して、Rank Math SEO プラグインを使ってみたらGoogle の検索結果に表示される記事抜粋スニペットの文字数が短過ぎに見えてびっくりした。#1 Yoast Alternative You Deserve - Rank Math SEO vs. Yoast SEORank Math SEO plugin for WordPress is hands down the best Yoast alternative WordPress plugin. And the best thing is, Rank Math is completely FREE!Rank Math
    ... >> つづき
  • 11
    2679年8月29日
    WordPress

    WP_CRON を停止して Linux crontab で自動バックアップする方法

    WP_CRON を停止して、Linux の crontab に移行する設定をこれまでに何度も試みたがうまくいかなかった。 毎日バックアップされるはずの、UpdraftPlus プラグインのクロンが動いていない。やっと成功した設定方法を記録しておく。wp-config.php に次の行を追加する。define('DISABLE_WP_CRON', true);/var/spool/cron  に、  httpd という名前のファイルを作成し、次の1行を追加する。 所有者を httpd.www など、httpd nginx サーバーの稼働ユーザー名と同じにする。nginx.conf に書いてある。root@s4:/v...
    ... >> つづき
  • 109
    2679年8月29日
    WordPress

    Nginx の Fcache が効いていない時に効かせる方法

    Kusanagi WordPress プラットフォームでは Fcache とBcache がある。 Fcache とはNginx ヱブサーバーのキャッシュ機能であり、Kusanagi の独自機能ではない。Nginx のアクセスログを眺めていると、  BYPASS MISS EXPIRED のみで、HITが殆どない。 トップ頁、アーカイブリストの頁ではHIT、 個別投稿頁では、BYPASS MISS EXPIRED ばかりでHITがない。Kusanagi fcache on とすると、fcache は有効になったかのように思えるが、本当にキャッシュが効いているのかどうかはログで確認しないとわからない。まず、Wordpressの編集画面にログインし...
    ... >> つづき
  • 287
    2679年8月25日
    WordPress

    httpdアクセスログを日本語デコードする方法

    HTTPD アクセスログの日本語化 Nginx,  Apache ヱブサーバーのアクセスログを見ると、日本語URLはエンコードされていて読めない。 そこで、デコードして表示させる。 ログのファイル名が ssl_access.log だとすると、tail -f ssl_access.log| perl -ne 'use URI::Escape; print uri_unescape($_);' tail -f access.log | php -R 'echo urldecode($argn)."\n";'で、日本語URlが読める状態で出力される。 Apacheのログをデコードする方法 - Life with ITプログラマ x ...
    ... >> つづき
  • 16
    2679年8月25日
    WordPress

    リロードなしにスタイルシートの更新を反映させる方法

    ヱブサイトの再構築中には、スタイルシート、style.css を頻繁に調整更新する。 CSSを追加、編集する度に再読み込みを繰り返して、変更の反映を確認していた。 これで編集者は反映を確認できるのだが、一般閲覧者はわざわざ再読み込みしたり、キャッシュを削除したりするはずはないので、変更が反映されていない崩れたデザインを見ているかもしれない。わざわざリロードしたりキャッシュを削除したりしなくても変更が確実に反映されるような設定方法を発見した。wp_enqueue_scripts で CSS、JS の読み込みを管理している場合には、次のようにfunctions.php に記述する。// 子テーマのstyle.cssを最後に読み込む add_acti...
    ... >> つづき
  • 2
    2679年8月25日
    WordPress

    頁カウンターの比較 WordPress

    WordPressで使える頁カウンターをいくつか同時に使ってカウントの仕方の違いを比べてみた。WP-PostViews    長期常用中 Post Views Counter  新規インストール Google Analytics Post Pageviews Pjaxblog の付属カウンター機能WP-PostViews は他のカウンターよりもカウントが多くなりがちなことに気づいた。一度のアクセスなのに2回カウントされることもあるようだ。ロボットクローラー Bots のリスト数も不十分に少ないような気がする。それで数が多くなりやすいのではないか。 それで Post Views Counter に乗り換えることにした。Post Views Cou...
    ... >> つづき

WordPress カテゴリ人気記事 Views most

タグ関連記事

閲覧履歴