タクソノミーページで一番下の子孫要素を取得する方法

タクソノミーページで子孫要素を取得する方法です。

これが活用できる場面は

(例)


→軽自動車,普通自動車,大型自動車,

-→メーカーA,メーカーB,メーカーC,…

例えば、軽自動車一覧のページで、メーカー別に軽自動車のページを表示させたい場合に、
メーカー一覧のメニューを表示でき、メーカー別に一覧を表示した際にも、メーカー一覧を表示したままにできる点です。

下記のコードを、使用することで、
タクソノミーページで子孫要素、ここでは(メーカーA,メーカーB,メーカーC,…)などの一番下の要素で、
常に表示させておくおことができます。

WordPressの無限スクロールをプラグインで実装する

ワードプレスのサイトでは普通、ブログ記事のアーカイブページなどは、
ページャなどで推移するかと思います。

無限スクロールを実装すれば、
ページ遷移をしないで、過去の記事をスクロールするだけで、読み込むことができるメリットがあります。

実装するのに必要なプラグインは
「Infinite-Scroll」です。

プラグインをインストールした後に、設定画面を開き
1,contentselecter 記事部分を囲むセレクタ名
2,Navigation selecterでページャを囲むセレクタ名
3,Nextselecter 次へのボタンのセレクタ名
4,itemselecter 繰り返し表示される記事単体のセレクタ名

以上を設定する必要があります。

プラグインの使用にページャーが必要なため、
WP-PageNaviなどのプラグインを入れておくとよいでしょう

WPのカスタムタクソノミーで子カテゴリの一覧の取得方法

WordPressで親カテゴリーの記事一覧ページで、子カテゴリの一覧を取得する方法です。

例えば、
親カテゴリー:カテゴリーA,
子カテゴリー:カテゴリーA-1,カテゴリーA-2,カテゴリーA-3,…

親カテゴリー:カテゴリーB,
子カテゴリー:カテゴリーB-1,カテゴリーB-2,カテゴリーB-3,…
といったように
カテゴリーAのページでは、それに属する子カテゴリーを取得、
カテゴリーBのページでは、それに属する子カテゴリーを取得するといったことが可能です。

$categoriesにはget_termsで投稿ページのタクソノミーを指定します。
あとは、get_term_linkで取得したい子カテゴリを取得表示が可能です。

overflow:hiddenなどで スクロール禁止が出来ない時の対処法

スマートフォンなどでハンバーガーメニューを開いたときの動作の指定は、
様々あります。

横からスライドインするものや、上からプルダウンで降りてくるものなどがありますが、
今回は、メニューが画面全体に表示されて、その間ウェブサイトのスクロールはできないようにするものです。

その際、bodyに対してのOverflow:hiddenを指定すれば、pcやandroid端末で、スクロール禁止はできますが、
iosに対しては動作しません。

ブラウザ側のpassive というオプションが、デフォルトで設定されており、
このオプションがtrueであると、preventDefault(); が含まれていないとスクロールを許可してしまうため、
Over flowが効きません。

対処法は

上記のように記述することで解決が可能です。

DOMの変更を監視して、スクロールに応じてフェードインしたりする動きを実装

サイト制作でアニメーションを製作していると、
ユーザーがスクロールして、特定の要素が画面内に表示された時など、

指定した位置に来た時に変更をして、
任意のタイミングでjsを発火させたい時などがあるかと思います。

そんな時にタグ内の変更を感知して、その瞬間処理を走らせたい場合、

指定する場合は、class名など複数指定できるものではなく、
idなど一意のものに限ります。

クラス名であっても、何番目の要素か指定してあげれば可能です。

WordPressでの自動挿入ではなくalt属性をキチンと設定する

画像のalt属性はWordPressでは代替テキストとして扱われていますが、
面倒くさくて、空欄のままにしていることも多いのではないでしょうか。

旧バージョンのWordPressではalt属性にファイル名が自動設定されていましたが、
アクセシビリティ向上から自動挿入機能がなくなりました。

googleなど検索エンジンを巡回するクローラーは、
画像の文章を読み取ることができないためalt属性から画像を認識します。

そのため、alt属性にはファイル名ではなく、画像の説明が好ましいからです。

altを自動で入力してくれるプラグインは存在しますが、ファイル名などを自動でaltに設定したり、ランダムな文字列をaltに設定するのは好ましくありません。

altは必ず設定しなければいけないということではありませんが、
・装飾的に使用した画像
・存在しなくても意味的に大丈夫な画像など
設定しないほうがマイナスになりにくいでしょう。

図の説明など、アクセシビリティに直結するような場合、意識的にaltを設定することでSEO対策につながるので、面倒くさがらずに設定をしていきたいですね

flex-directionを指定した時のIE11で表示くずれ

display Flex使用時でテキストを上揃え、画像だけを下に揃えで、
テキスト量にかかわらず、常に画像を下にはい位置したいい場合、下記のように記述すると、
実現可能ですが、IEで見たときに画像の下に空白ができてしまう不具合があります。

解決方法は、
画像を囲む親要素に対してmin-height: 0%;を指定してあげることで解決が可能です。

Atomエディタの文法チェッカー「W3C Markup Validator」

HTML 内に文法のミスが無いか、W#CのHTMLとCSSの文法チェッカーを使用した方もいるかと思いますが、
今回はエディタ上で簡単に行える、htmlのチェックしてくれるプラグインの紹介です。

そのプラグインの名前は「W3C Markup Validator」です。

W3C Markup Validatorの基本的な使い方は、
記述したHTMLをctrl+sなどで保存すると、
エディタの下部にあるインフォメーションに

文法の誤りなどがあると、バリデート結果のパネルが表示され
エラー情報などが表示されます。

また、エラー情報をクリックするとエラーのある場所に飛んでくれます。

致命的なエラーなど、チェックすることができるため、大幅なミスなどを未然に防ぐためにも、入れておきたいプラグインですね。

WordPress の固定ページのリビジョン機能

WordPressには「リビジョン」という、元の状態に復元できる機能が実装されています。

編集に失敗して、いざというときに復元したいい場合役に立つときがあります。

編集前の状態に戻すには、投稿ページにあるメニューの公開にあるリビジョンを選択、
そこで、戻したいバージョンの記事を選択するだけです。

デメリットとしては、
リビジョン管理をするとデータが増大してしまうことです。
リビジョンの管理に制限がなくどんどん作成されてしまうので、データを圧迫してしまう可能性があります。

データを圧迫したくないという方は、
リビジョンを無効にすくことも可能です。

無効にするには、
wp-config.phpに記述してあげればOKです。

保存するリビジョン数を制限したい場合は以下を記述します。

バリデート付きの条件分岐フォーム作成

mw wpformで条件分岐フォームでありながら、それぞれのフォームにバリデーションを付与する方法です。

以下では選んだラジオボタンによって、
切り替えるフォームを作成する方法です。

funnction.phpに以下の記述をします。

$data[‘投稿’] にあたる部分がラジオボタンのname属性にあたる部分です。
あとはset_ruleにバリデートを付与したいフォームエリアのname属性を指定してあげればOKです。

あとはスクリプトでname=”投稿”のvalの値によって表示非表示の条件分岐をしてあげれば、
選んだ選択肢によって表示非表示を切り替えられるマルチフォームを作成することができます。