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

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

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

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

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

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

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

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

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

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

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

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

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

■html

■css

■js

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

投稿記事に連番を振る

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

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

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

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

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

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

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

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

となります。

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

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

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

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

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

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

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

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

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

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

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

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

■抜粋

■本文

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

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

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

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

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

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

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

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

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

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

Textareaの文字制限の設定

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

■HTML

■jquery