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

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

■html

		
ヘッダーテキストヘッダーテキストヘッダーテキストヘッダーテキストヘッダーテキスト


		

			

			

			

		


		

			

				
ロゴ
				
			
		
	

■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%;
}

■js

//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 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);
});

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

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

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

まずは、指定した投稿タイプに連番を振るよう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;
}

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

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

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

  post_type );
	$i = 10;
	for ($b = 1;; $b++) {
	if ($no <= $i * $b) {
	break;
	}
	}
  ?>	
    
    
   

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

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

となります。

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

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

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

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

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

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

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

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

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;

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

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

■抜粋

■本文

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

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

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

]]>

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

■変更前

	
	
	
	
	
	


■変更後

   

	
	
	
   


   

	
	
	
   

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

$(function(){
	do {
		$("#box").children("img:lt(3)").wrapAll('
')
	}while($("#box").children("img").length);
});

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

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

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

 '共通カテゴリ',
    'hierarchical' => true,
    'show_ui' => true,
    'query_var' => true,
));
?>

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

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

■HTML

文字数は0です。

■jquery

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

トップページに、複数あるカスタム投稿記事一覧の新着情報をのせる方法です。

通常のループで投稿を指定せず、query_postsを使って複数の投稿タイプを指定してループを回します。
get_postsは，条件を指定して，その条件を満たす投稿を取得するための関数です。

any(全て)，post (投稿ページ)，page(固定ページ)，post-type-slug(カスタム投稿）
必要に応じて、記述する投稿タイプを記述していきます。

  array('post','page','custom01','custom02'),
 'orderby' => 'date',
 'posts_per_page' => 10,
 'paged' => $paged
 )); ?>

‘custom01’,’custom02’の部分には、表示させたいカスタム投稿名を指定します。

複数あるフォームを一つにまとめて、フォーム１ページとして、
お問い合わせフォームを作成するということはよくあります。

条件分岐でフォームを個別に表示させることができたとしても、
お問い合わせした相手に、複数フォームの項目の内容が飛んでしまっては意味がありません。

そこで送信するメールもフォームの内容に合わせて、分岐させる方法を紹介します。

フィルターフック
mwform_auto_mail_mw-wp-form-xxxを使用します。

function my_mail( $Mail, $values, $Data ) {
    if($Data->get( 'radio' ) == "フォームA") {
     $Mail->body = '本文'; // フォームAの本文
    }elseif(($Data->get( 'radio' ) == "フォームB"){
     $Mail->body = '本文'; // フォームBの本文
    }
    return $Mail;
}
add_filter( 'mwform_auto_mail_mw-wp-form-xxx', 'my_mail', 10, 3 );

上記ではフォーム内にあるラジオボタンの選んだ選択肢でメールの内容を分岐させています。

xxxの部分はフックを適用したいフォームの作成画面に表示されているフォーム識別子を入力します。