月別アーカイブをスクロールで月ごとに読み込み

月別アーカイブをスクロールで月ごとに読み込みさせる方法です。

例えば今月の記事一覧をページを読み込んだ時表示しておき、最後までスクロールすると、
先月の記事一覧を読み込むといった感じです。

■index.phpなど

■js

■more.php

wpプラグインulikeボタンを記事一覧でも表示させる方法


wpプラグインulikeは記事に対して言い値ボタンを設置できるものですが、記事一覧に設置するための設定はありません、そこで、
wpプラグインulikeボタンを記事一覧でも表示させる方法です。

上記をfunction.phpに記述したら,
ループ分の中で下記を記述するとUlikeボタンを表示させることが可能です。

slick.js中央の画像を大きく表示させる方法

slick.js中央の画像を大きく表示させる方法です。

全体のスライドの大きさを0.8倍に縮小した後、中央の縮小倍率を戻すことで、実装可能です。

この時、CSSに加えて、JSでは大きく表示する画像が中央に来るようにcenterMode: trueを設定しておく必要があります。

カスタム投稿の特定のタームの記事を除外

query_postsで新着一覧の記事一覧を作成する場合で、特定のタームを除外して表示させる方法です。

例) 今回はタクソノミー[news]の記事一覧から実績[work]を除外して表示させる場合

‘operator’ => ‘NOT IN’で指定したターム以外ののタームを取得して除外しています。

モーダルウィンドウを簡単に実装できる「Modaal」プラグインの使い方


写真などを拡大表示させて、ユーザーに見せるときに、有効なのがポップアップモーダルですが、
プラグインを使用することで簡単に実装が可能です。

http://humaan.com/modaal/

■必要ファイル
ZIPフを解凍した中にに入っている「modaal.min.js」と「modaal.min.css」だけです。

基本的な設定はhttp://humaan.com/modaal/にある通りで、

■HTML

■JS

href=”#inline”にポップアップに表示させるID名を指定します。
ギャラリー表示では、スライダーのように次の画像を表示させたりなどが可能です、

■HTML

■JS

Youtubeの埋め込みをレスポンシブ対応

レスポンシブに対応しているサイトで、youtubeの動画を埋め込む際、
スマートフォン用の表示なったときに、動画の画面表示比率を維持したまま縮小させる方法です。

padding-bottom: 56.25%; は
高さの比率 ÷ 幅の比率 × 100でアスペクト比を算出することが可能です。

今回は16:9の比率なのでpadding-bottom: 56.25%; に設定しています。

wordpress 管理画面にCSSやjsを適用

WordPress の管理画面にCSSやJavaScriptを適用させ対場合の備忘録です。

管理画面のすべてのページで専用のCSSやJsを読み込ませるには下記を記述します。

■CSS

ユーザーの編集の編集から管理画面の配色など選択できますが、この方法なら自分の思うように配色したりが可能になります。

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

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

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

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

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

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

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

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

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

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

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

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

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

■html

■css

■js

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