クリエイター：コーディング備忘録ブログ – クリエイター：コーディング備忘録ブログ。クレアネットスタッフがまとめています。

記事内で使用されている画像をサムネイルとして表示する方法

2019/2152019/215 sugita コメントする

サムネイルをいちいちアイキャッチから登録するのが面倒、
記事本文の画像を引用してくれれば楽なんだけどという人もいるかもしれません。

そこで、本文に使用されている画像をサムネイルとして、
アーカイブページに表示させる方法です。

記事本文で使用されている画像を表示させるには、
function.phpに下記の記述をします。

function catch_image() {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
    $first_img = $matches [1] [0];
  
if(empty($first_img)){ //Defines a default image
        $first_img = "/images/○○.jpg";
    }
    return $first_img;
}

function catch_image() {

global $post, $posts;

$first_img = '';

ob_start();

ob_end_clean();

$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);

$first_img = $matches [1] [0];

if(empty($first_img)){ //Defines a default image

$first_img = "/images/○○.jpg";

}

return $first_img;

}

$first_img = “/images/○○.jpg”;には記事内に画像がない場合の画像を表示させるurlを任意で入れます。

実際にアーカイブページで画像を表示させたい場所に以下を記述します。

<img src="<?php echo catch_image(); ?>"/>

1	<img src="<?php echo catch_image(); ?>"/>

アイキャッチやカスタムフィールドで画像登録でも構わないですが、シンプルな投稿の場合、
自動で画像をサムネイルにしてくれたほうが、簡単で手間いらずで便利ですね。

WordPressのアーカイブページの1ページ目の表示記事数を変更

2019/2142019/214 sugita コメントする

カスタム投稿タイプが「news」のみのアーカイブページの1ページ目のみを16記事表示させて、
2ページ目から8記事ずつ表示させたいという特殊な場合でもfunction.phpに下記の記述を加えることで可能になります。

  // カスタム投稿タイプが「news」のときに表示件数を「16」に設定
    function change_posts_paging($query) {
      if ( is_admin() || is_page('news') || is_page('news') || is_term('news')) return;
        if ( get_query_var( 'post_type' ) == 'news' ) {
            $query->set( 'posts_per_page', 16 );
            $paged = get_query_var( 'paged' ) ? intval( get_query_var( 'paged' ) ) : 1;

            if ($paged >= 2){ // 2ページ目以降 表示件数を8に
            $query->set('offset', 16 + 8*($paged-2) );
            $query->set('posts_per_page',8); // 
            }
        }
    }
    add_action( 'pre_get_posts', 'change_posts_paging' );

// カスタム投稿タイプが「news」のときに表示件数を「16」に設定

function change_posts_paging($query) {

if ( is_admin() || is_page('news') || is_page('news') || is_term('news')) return;

if ( get_query_var( 'post_type' ) == 'news' ) {

$query->set( 'posts_per_page', 16 );

$paged = get_query_var( 'paged' ) ? intval( get_query_var( 'paged' ) ) : 1;

if ($paged >= 2){ // 2ページ目以降表示件数を8に

$query->set('offset', 16 + 8*($paged-2) );

$query->set('posts_per_page',8); //

}

add_action( 'pre_get_posts', 'change_posts_paging' );

無限スクロールなどのWordPressプラグイン「Infinite Scroll」と組み合わせて使用すれば、
最初は16記事見せて、スクロールするたびに8記事ずつ読み込ませるといったことも可能になります。

可変対応のスクロール固定ヘッダーの作成

2019/2132019/213 sugita コメントする

今回は可変対応のスクロール固定ヘッダーの作成についてです。

画像のようにスライダー、今回の場合ブラウザの高さ最大まで表示されているスライダー画像の下に、グローバルナビゲーションが表示されていて、
グローバルナビがちょうどブラウザのトップに来る所までスクロールすると、ヘッダー固定するようにします。

■html

<header>
		<p class="header-text">ヘッダーテキストヘッダーテキストヘッダーテキストヘッダーテキストヘッダーテキスト</p>


		<ul class="slider"><!--slick.jsなど 他、画像や,bxスライダー etc-->
			<li><img src="assets/images/main_img_01.png" alt=""></li>
			<li><img src="assets/images/main_img_02.png" alt=""></li>
			<li><img src="assets/images/main_img_03.png" alt=""></li>
		</ul>


		<div class="menu ">
			<div class="container">
				<h1 class="logo"><a href="#">ロゴ</a></h1>
				<nav class="navi">
					<ul>
						<li><a href="#">メニュー</a></li>
						<li><a href="#">メニュー</a></li>
						<li><a href="#">メニュー</a></li>
						<li><a href="#">メニュー</a></li>
						<li><a href="#">メニュー</a></li>
					</ul>
				</nav>
			</div>
		</div>
	</header>

<p class="header-text">ヘッダーテキストヘッダーテキストヘッダーテキストヘッダーテキストヘッダーテキスト</p>

</ul>

<ul>

</ul>

</nav>

</div>

</header>

■css

header {
    height: 100vh;
}
/*header上部のテキスト*/
.header-text {
    background: #303333;
    font-size: 1.4rem;
    color: #FFF;
    text-align: center;
    padding: 10px 0;
}
/*ナビゲーション部分*/
.container {
    width: 1100px;
    margin: auto;
}
.menu .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.menu .container .logo {
    max-width: 154px;
}
menu .container .navi {
    width: calc(100% - 154px);
}
.menu .container .navi ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.menu .container .navi ul li {
    margin: 0 30px;
}

/*ヘッダー固定用*/
header .menu.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    bottom: auto;
    margin-top: 0;
    width: 100%;
    z-index: 9999;
}

/*スライダー関連 slick.jsの場合*/
header .slider .slick-slide img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
}

header {

height: 100vh;

}

/*header上部のテキスト*/

.header-text {

background: #303333;

font-size: 1.4rem;

color: #FFF;

text-align: center;

padding: 10px 0;

}

/*ナビゲーション部分*/

.container {

width: 1100px;

margin: auto;

}

.menu .container {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: justify;

-ms-flex-pack: justify;

justify-content: space-between;

}

.menu .container .logo {

max-width: 154px;

}

menu .container .navi {

width: calc(100% - 154px);

}

.menu .container .navi ul {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: end;

-ms-flex-pack: end;

justify-content: flex-end;

}

.menu .container .navi ul li {

margin: 0 30px;

}

/*ヘッダー固定用*/

header .menu.is-fixed {

position: fixed;

top: 0;

left: 0;

bottom: auto;

margin-top: 0;

width: 100%;

z-index: 9999;

}

/*スライダー関連 slick.jsの場合*/

header .slider .slick-slide img {

-o-object-fit: cover;

object-fit: cover;

width: 100%;

}

■js

//slick.jsを使用の場合
$(function() {
	$('.slider').slick({
		autoplay: true,
		arrows: false,
	});
});

//slick.jsを使用の場合

$(function() {

$('.slider').slick({

autoplay: true,

arrows: false,

});

//ウィンドウの高さからヘッダーのテキストの高さを引いた分のスライダーの高さを決定
$(window).on('load resize', function() {
  var he = $('.header-text').outerHeight();

  var he =  'calc(100vh - ' + he + 'px)';
	$('header .slider .slick-slide img').css('height',he);
});

//ウィンドウの高さからヘッダーのテキストの高さを引いた分のスライダーの高さを決定

$(window).on('load resize', function() {

var he = $('.header-text').outerHeight();

var he = 'calc(100vh - ' + he + 'px)';

$('header .slider .slick-slide img').css('height',he);

});

//ヘッダー固定
$(window).on('load resize', function() {

  var nav = jQuery('header .menu');
	var slH = $('.slider').outerHeight();　//スライダーの高さ拾得
	var he = $('.header-text').outerHeight();　//ヘッダーのテキストの高さ拾得
	var navH = $('header .menu').outerHeight();　//グローバルナビの高さ拾得

	var slH = slH + he - navH;　
	var flMenu = function() {
	   var win = jQuery(window).scrollTop();
			
			if (win > slH) {
					nav.addClass('is-fixed');
			} else {
					nav.removeClass('is-fixed');
			}
	}
	jQuery(window).scroll(flMenu);
	jQuery(window).ready(flMenu);
	jQuery('body').bind('touchmove', flMenu);
});

//ヘッダー固定

$(window).on('load resize', function() {

var nav = jQuery('header .menu');

var slH = $('.slider').outerHeight();　//スライダーの高さ拾得

var he = $('.header-text').outerHeight();　//ヘッダーのテキストの高さ拾得

var navH = $('header .menu').outerHeight();　//グローバルナビの高さ拾得

var slH = slH + he - navH;　

var flMenu = function() {

var win = jQuery(window).scrollTop();

if (win > slH) {

nav.addClass('is-fixed');

} else {

nav.removeClass('is-fixed');

}

jQuery(window).scroll(flMenu);

jQuery(window).ready(flMenu);

jQuery('body').bind('touchmove', flMenu);

});

ブラウザ画面をリサイズして画像の高さが変わっても、変更されるたびに、
ヘッダー内の要素の高さを取得して計算しているので、
画面幅に影響なくスクロールしたらヘッダーがトップで固定されるようになります。

投稿記事に連番を振る

2019/2122019/213 sugita コメントする

投稿記事に連番を振る方法です。

使い方のサンプルとして、トップページの新着記事から新着一覧のアーカイブページの特定の記事に、
アンカーリンクとして飛ばすといったことが可能になります。

まずは、指定した投稿タイプに連番を振るようfunction.phpに記述します。（ここでは’レビュー=review’としています。）
■function.php

function get_post_number( $post_type = 'review', $op = '>' ) {
    global $wpdb, $post;
    $post_type = is_array($post_type) ? implode("','", $post_type) : $post_type;
    $number = $wpdb->get_var("
        SELECT COUNT( * ) + 1
        FROM $wpdb->posts
        WHERE post_date {$op} '{$post->post_date}'
        AND post_status = 'publish'
        AND post_type = ('{$post_type}')
    ");
    return $number;
}

function get_post_number( $post_type = 'review', $op = '>' ) {

global $wpdb, $post;

$post_type = is_array($post_type) ? implode("','", $post_type) : $post_type;

$number = $wpdb->get_var("

SELECT COUNT( * ) + 1

FROM $wpdb->posts

WHERE post_date {$op} '{$post->post_date}'

AND post_status = 'publish'

AND post_type = ('{$post_type}')

");

return $number;

}

先ほどの投稿された記事に連番を振り

<?php the_ID(); ?>

1	<?php the_ID(); ?>

で記事IDを指定してやることで、
アーカイブの何ページ目の○○の記事にアンカーリンクさせるといったことも可能になります。

下記のパーマリンクの記述はトップの新着情報を取得するループ分に記述します。

<?php if (get_post_type() === 'review'): ?>
  <?php
	$no = get_post_number( $post->post_type );
	$i = 10;
	for ($b = 1;; $b++) {
	if ($no <= $i * $b) {
	break;
	}
	}
  ?>	
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>review/page/<?php echo $b?>/#<?php the_ID(); ?>">
    <?php else : ?>
   <a href="<?php the_permalink(); ?>">
<?php endif; ?>

<?php if (get_post_type() === 'review'): ?>

<?php

$no = get_post_number( $post->post_type );

$i = 10;

for ($b = 1;; $b++) {

if ($no <= $i * $b) {

break;

}

<a href="<?php echo esc_url( home_url( '/' ) ); ?>review/page/<?php echo $b?>/#<?php the_ID(); ?>">

<?php else : ?>

<?php endif; ?>

上記では、アーカイブの1ページに10記事表示されるとして、該当する記事がアーカイブページの何ページ目にあるかを判定して、
アンカーリンクを飛ばしています。

例)カスタム投稿、reviewに属する特定の記事が15番目の記事でIDが26だったとして$i(アーカイブページ、１ページの記事数)から2回目のループ、10以上20以内の（2ページ目）にあるので、

<a href="<?php echo esc_url( home_url( '/' ) ); ?>review/page/2/#26">

1	<a href="<?php echo esc_url( home_url( '/' ) ); ?>review/page/2/#26">

となります。

レスポンシブサイトの印刷でスマホ用のレイアウトになるときの対処法

2019/19 sugita コメントする

レスポンシブサイトの印刷を実際に行うときに、スマホ用のレイアウトで表示されてしますことがあります。
今回はそれに対する対処法です。

@media (max-width: 767px) /*スマホ用のレイアウト*/
@media (min-width: 1200px) /*PC用のレイアウト*/

1 2	@media (max-width: 767px) /スマホ用のレイアウト/ @media (min-width: 1200px) /PC用のレイアウト/

基本画面幅によってレイアウトを変更する場合上記のように記述しますが、
この書き方だと印刷する際スマホ表示になってしまいます。

なので、メディアクエリの設定を変更します。

@media only screen (max-width: 767px) /*スマホ用のレイアウト*/
@media print, screen and (min-width: 1200px) /*PC用のレイアウト*/

1 2	@media only screen (max-width: 767px) /スマホ用のレイアウト/ @media print, screen and (min-width: 1200px) /PC用のレイアウト/

pc表示の時にとプリントする際にはprint, screen andをメディアクエリに記述することで解決できます。

wpのevents-managerプラグインで予約数に応じて表示を変更する

2019/182019/18 sugita コメントする

wpのevents-managerプラグインで予約数に応じて、受付終了、残りわずか、受付中と文言を切り替える方法です。

プラグイン > プラグインの編集 > events-managerから
em-event.phpを選択

case '#_EVENTID':
$replace = $this->event_id;
break;

case '#_EVENTID':

$replace = $this->event_id;

break;

上記のようにcase~と書かれている場所付近に
下記を追加します。

case '#_RESERVE':
  //This doesn't consider reserved (i.e. pending) bookings as 'booked'
  $booked = 0;
  $max = 0;
foreach( $this->get_tickets()->tickets as $EM_Ticket ){
    if( $EM_Ticket->is_displayable() ) {
      
        $booked = $EM_Ticket->get_booked_spaces();
        $max = $EM_Ticket->ticket_spaces;
      
    }
  }
  global $EM_Event;
  $replace = "受付終了";
  if ($max > $booked) {
    if ($max - $booked > 3) {
      $replace = "受付中";
    } else {
      $replace = "残りわずか";
    }           
  }
  break;

case '#_RESERVE':

//This doesn't consider reserved (i.e. pending) bookings as 'booked'

$booked = 0;

$max = 0;

foreach( $this->get_tickets()->tickets as $EM_Ticket ){

if( $EM_Ticket->is_displayable() ) {

$booked = $EM_Ticket->get_booked_spaces();

$max = $EM_Ticket->ticket_spaces;

}

global $EM_Event;

$replace = "受付終了";

if ($max > $booked) {

if ($max - $booked > 3) {

$replace = "受付中";

} else {

$replace = "残りわずか";

}

break;

記述ができたらEvents Manager のオプションの書式設定>イベントの
イベント一覧の書式のhtmlの書かれている場所に#_RESERVEを追記してあげることで、予約数に応じた文言を表示することができます。

WordPressのrssにアイキャッチ画像の情報を出力させる

2018/12252018/1225 sugita コメントする

WordPressで新着記事をサムネイル付きで表示させる方法です。
通常では抜粋や本文などにある記事内の画像の情報しか引っ張ってくることしかできませんが、
function.phpに設定を記述することで、記事に設定したサムネイル情報を引き出すことが可能になります。

■抜粋

■本文

functions.phpに以下を追記します。

function rss_post_thumbnail($content) {
global $post;
if(has_post_thumbnail($post->ID)) {
$content = '<p>' . get_the_post_thumbnail($post->ID) . '</p>' . $content;
}
return $content;
}
add_filter('the_excerpt_rss', 'rss_post_thumbnail');
add_filter('the_content_feed', 'rss_post_thumbnail');

function rss_post_thumbnail($content) {

global $post;

if(has_post_thumbnail($post->ID)) {

$content = '<p>' . get_the_post_thumbnail($post->ID) . '</p>' . $content;

}

return $content;

}

add_filter('the_excerpt_rss', 'rss_post_thumbnail');

add_filter('the_content_feed', 'rss_post_thumbnail');

記述が完了すると、pタグで囲まれた画像のurlが、RSSの内に画像情報として記載されます。

<description><![CDATA[<p><img src=""></p>]]></description>

1	<description><![CDATA[<p><img src=""></p>]]></description>

任意の数ごとに要素で囲い込む方法

2018/1220 sugita コメントする

要素の中にある、複数ある子要素に対して、n個ずつ特定の要素で囲い込む方法です。
例えば、div要素にずらっと並んだimg要素をクラスimg-boxという要素を作成して三個ずつ、
まとめるとすると下記のようになります。

■変更前
<div id="box">
	<img src="img/test.jpg" alt="">
	<img src="img/test.jpg" alt="">
	<img src="img/test.jpg" alt="">
	<img src="img/test.jpg" alt="">
	<img src="img/test.jpg" alt="">
	<img src="img/test.jpg" alt="">
</ul>

■変更後
<div id="box">
   <div id="img-box">
	<img src="img/test.jpg" alt="">
	<img src="img/test.jpg" alt="">
	<img src="img/test.jpg" alt="">
   </div>
</div>
<div id="box">
   <div id="img-box">
	<img src="img/test.jpg" alt="">
	<img src="img/test.jpg" alt="">
	<img src="img/test.jpg" alt="">
   </div>
</div>

■変更前

</ul>

■変更後

</div>

</div>

この変更をjqeryで行う方法は、#boxという要素に対して、子要素のimgを指定して.wrapAllを使用してdivタグで内包します。
whileでの記述ではlengthでループする度にimgの存在をカウントして、0になるまでループさせる記述です。

$(function(){
	do {
		$("#box").children("img:lt(3)").wrapAll('<div class="img-box"></div>')
	}while($("#box").children("img").length);
});

$(function(){

do {

$("#box").children("img:lt(3)").wrapAll('<div class="img-box"></div>')

}while($("#box").children("img").length);

});

複数のカスタム投稿に共通のカスタムタクソミーを設定する

2018/12182018/1218 sugita コメントする

「共通カテゴリー(com_category)」を作成し、複数のカスタム投稿タイプを一つのカスタムタクソノミーでまとめる方法です。

一つのタクソノミー統一する利点として、複数あるカスタム投稿タイプ記事を一つのシングルページで管理したり、
個別にカスタム投稿タイプで分けて記事を表示できたり、柔軟に記事を分類し表示できる点です。

例えば、新着一覧では、それぞれのカスタム投稿の、全ての記事を表示し、
そこから個別に投稿を表示できたりできます。

<?php  
register_taxonomy(
    'com_category', array('news', 'work'),array(
    'label' => '共通カテゴリ',
    'hierarchical' => true,
    'show_ui' => true,
    'query_var' => true,
));
?>

<?php

register_taxonomy(

'com_category', array('news', 'work'),array(

'label' => '共通カテゴリ',

'hierarchical' => true,

'show_ui' => true,

'query_var' => true,

));

com_categoryには[news]と[work]といった、共通タクソノミーに属させたい、別々のカスタム投稿を配列として代入しています。

Textareaの文字制限の設定

2018/12122018/1212 sugita コメントする

テキストエリアに最大文字数の設定をしたい場合、
maxlength属性を使用します。
文字数制限を設定しただけだと、ユーザーにテキストエリアにどれだけの文字を打ち込むことができるのか
わかってもらうことができないので、jqueryを使用して300文字以上記述するとアラートが出るように設定してみます。

■HTML

<textarea  maxlength="300" ></textarea>
<div class=“number”>文字数は0です。</div>

1 2	<textarea maxlength="300" ></textarea> <div class=“number”>文字数は0です。</div>

■jquery

$(function () {
  $("textarea").keyup(function(){
    var count = $(this).val().length;
    $(“.number”).text(count);
    if(txtcount > 300){
      alert('制限文字数を超えています。');
    } 
  });
});

$(function () {

$("textarea").keyup(function(){

var count = $(this).val().length;

$(“.number”).text(count);

if(txtcount > 300){

alert('制限文字数を超えています。');

}

});