Textareaの文字制限の設定

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

■HTML

■jquery

WP 複数の投稿タイプの新着一覧の作成

トップページに、複数あるカスタム投稿記事一覧の新着情報をのせる方法です。

通常のループで投稿を指定せず、query_postsを使って複数の投稿タイプを指定してループを回します。
get_postsは,条件を指定して,その条件を満たす投稿を取得するための関数です。

any(全て),post (投稿ページ),page(固定ページ),post-type-slug(カスタム投稿)
必要に応じて、記述する投稿タイプを記述していきます。

‘custom01’,’custom02’の部分には、表示させたいカスタム投稿名を指定します。

MW WP formで自動返信メールを分ける方法

複数あるフォームを一つにまとめて、フォーム1ページとして、
お問い合わせフォームを作成するということはよくあります。

条件分岐でフォームを個別に表示させることができたとしても、
お問い合わせした相手に、複数フォームの項目の内容が飛んでしまっては意味がありません。

そこで送信するメールもフォームの内容に合わせて、分岐させる方法を紹介します。

フィルターフック
mwform_auto_mail_mw-wp-form-xxxを使用します。

上記ではフォーム内にあるラジオボタンの選んだ選択肢でメールの内容を分岐させています。

xxxの部分はフックを適用したいフォームの作成画面に表示されているフォーム識別子を入力します。

WordPressサイトの中で静的htmlを共存させる

WordPressサイト内で別途、違うデザインのページを置くときや、ランディングページの作成、
会員用のページを作成したい時など、静的ページとして構築したい場合があります。

ですが、wordPress では固定ページに登録したスラッグの階層で、
静的HTMLを置いてしまうと、そのページが閲覧できなくなってしまいます。

WordPressをインストールしたフォルダの中にあるindex.phpをコピーして
下記の記述に変更します。

↓↓

WordPressをインストールしているディレクトリのindex.phpを
静的htmlファイルのあるフォルダ内にコピーして、
header.phpへのパスをディレクトリからのパスに変更してあげることで、共存させることが可能です。

カスタム投稿記事でコメント欄を追加

カスタム投稿記事でコメント欄を追加する方法です。

1,WordPressの設定で、
「設定」>「ディスカッション」で「新しい投稿へのコメントを許可する 」にチェック、

2,function.phpにカスタム投稿にコメントの許可
‘supports’ => array( ‘title’, ‘editor’, ‘thumbnail’, ‘excerpt’, ‘custom-fields’,’comments’ ),

3,コメント用のテンプレ作成

4,single-カスタム投稿名.phpに
インクルードタグを表示させたい場所に追加

5,最後に東湖の新規作成画面で、表示オプションのデスカッションにチェックを入れて完了です。

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

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

これが活用できる場面は

(例)


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

-→メーカー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など一意のものに限ります。

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