slick.js中央の画像を大きく表示させる方法です。
全体のスライドの大きさを0.8倍に縮小した後、中央の縮小倍率を戻すことで、実装可能です。
.slick-slide {
transform: scale(.8);
}
.slick-current {
transform: scale(1);
}
この時、CSSに加えて、JSでは大きく表示する画像が中央に来るようにcenterMode: trueを設定しておく必要があります。
$('.slick').slick({
centerMode: true,
});
query_postｓで新着一覧の記事一覧を作成する場合で、特定のタームを除外して表示させる方法です。
例) 今回はタクソノミー[news]の記事一覧から実績[work]を除外して表示させる場合
'tax_query' => array( array( 'taxonomy' => 'news',//タクソノミーnews 'field' => 'slug', 'terms' => 'work', //ターム名 'operator' => 'NOT IN', ), ),
‘operator’ => ‘NOT IN’で指定したターム以外ののタームを取得して除外しています。
写真などを拡大表示させて、ユーザーに見せるときに、有効なのがポップアップモーダルですが、
プラグインを使用することで簡単に実装が可能です。
■必要ファイル
ZIPフを解凍した中にに入っている「modaal.min.js」と「modaal.min.css」だけです。
]
基本的な設定はhttp://humaan.com/modaal/にある通りで、
■HTML
Showポップアップに表示させる内容
■JS
$(".inline").modaal();
href=”#inline”にポップアップに表示させるID名を指定します。
ギャラリー表示では、スライダーのように次の画像を表示させたりなどが可能です、
■HTML
Show Show Show
■JS
$('.gallery').modaal({
type: 'image'
});
レスポンシブに対応しているサイトで、youtubeの動画を埋め込む際、
スマートフォン用の表示なったときに、動画の画面表示比率を維持したまま縮小させる方法です。
.youtube-inner {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.youtube-inner iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
padding-bottom: 56.25%; は
高さの比率 ÷ 幅の比率 × 100でアスペクト比を算出することが可能です。
今回は16:9の比率なのでpadding-bottom: 56.25%; に設定しています。
WordPress の管理画面にCSSやJavaScriptを適用させ対場合の備忘録です。
管理画面のすべてのページで専用のCSSやJsを読み込ませるには下記を記述します。
■CSS
function admin_style() {
echo ''.PHP_EOL;
}
add_action('admin_print_styles', 'admin_style');
■JavaScript
function admin_script() {
echo ''.PHP_EOL;
}
add_action('admin_print_scripts', 'admin_script');
ユーザーの編集の編集から管理画面の配色など選択できますが、この方法なら自分の思うように配色したりが可能になります。
サムネイルをいちいちアイキャッチから登録するのが面倒、
記事本文の画像を引用してくれれば楽なんだけどという人もいるかもしれません。
そこで、本文に使用されている画像をサムネイルとして、
アーカイブページに表示させる方法です。
記事本文で使用されている画像を表示させるには、
function.phpに下記の記述をします。
function catch_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('//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を任意で入れます。
実際にアーカイブページで画像を表示させたい場所に以下を記述します。
アイキャッチやカスタムフィールドで画像登録でも構わないですが、シンプルな投稿の場合、
自動で画像をサムネイルにしてくれたほうが、簡単で手間いらずで便利ですね。
カスタム投稿タイプが「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' );
無限スクロールなどのWordPressプラグイン「Infinite Scroll」と組み合わせて使用すれば、
最初は16記事見せて、スクロールするたびに8記事ずつ読み込ませるといったことも可能になります。
今回は可変対応のスクロール固定ヘッダーの作成についてです。
画像のようにスライダー、今回の場合ブラウザの高さ最大まで表示されているスライダー画像の下に、グローバルナビゲーションが表示されていて、
グローバルナビがちょうどブラウザのトップに来る所までスクロールすると、ヘッダー固定するようにします。
■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をメディアクエリに記述することで解決できます。