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

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

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

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

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

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

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

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

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

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

  


    
name . "(" . $value->count . ")"; ?>

  

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

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

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

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

対処法は

■css
html, body{
  overflow: hidden;
}
■js
document.addEventListener('touchmove', function(e) {e.preventDefault();}, {passive: false});

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

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

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

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

$('#content').on('DOMSubtreeModified propertychange', function() {
       //変更された時の処理
});

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

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

$('.content')[1].on('DOMSubtreeModified propertychange', function() {
       //変更された時の処理
});

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

define(WP_POST_REVISION, false);

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

define(WP_POST_REVISION, 保存するリビジョン数);

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

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

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

/* mw wp form validate */
function my_validation_rule( $Validation, $data ) {

  if ( $data['投稿'] === '画像' ) {
      $Validation->set_rule( '画像', 'noEmpty', array(
        'message' => '画像が添付されていません'
      ) );
  }
	if ( $data['投稿'] === 'テキスト' ) {
      $Validation->set_rule( 'テキスト', 'noEmpty', array(
        'message' => 'テキストをご記入下さい。'
      ) );
  }
  return $Validation;
}
add_filter( 'mwform_validation_mw-wp-form-1582', 'my_validation_rule', 10, 2 );

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

■  投稿をを選択
[mwform_radio name="投稿" children="画像,テキスト]

■画像を添付してください
[mwform_file name="画像"]

■テキストを記入してください
[mwform_text name="テキスト"]

■送信ボタン
[mwform_submitButton name="mwform_submitButton-982" confirm_value="確認画面へ" submit_value="送信する"]

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