テキストエリアに最大文字数の設定をしたい場合、
maxlength属性を使用します。
文字数制限を設定しただけだと、ユーザーにテキストエリアにどれだけの文字を打ち込むことができるのか
わかってもらうことができないので、jqueryを使用して300文字以上記述するとアラートが出るように設定してみます。
■HTML
|
1 2 |
<textarea maxlength="300" ></textarea> <div class=“number”>文字数は0です。</div> |
■jquery
|
1 2 3 4 5 6 7 8 9 |
$(function () { $("textarea").keyup(function(){ var count = $(this).val().length; $(“.number”).text(count); if(txtcount > 300){ alert('制限文字数を超えています。'); } }); }); |
トップページに、複数あるカスタム投稿記事一覧の新着情報をのせる方法です。
通常のループで投稿を指定せず、query_postsを使って複数の投稿タイプを指定してループを回します。
get_postsは，条件を指定して，その条件を満たす投稿を取得するための関数です。
any(全て)，post (投稿ページ)，page(固定ページ)，post-type-slug(カスタム投稿）
必要に応じて、記述する投稿タイプを記述していきます。
|
1 2 3 4 5 6 7 |
<?php $paged = get_query_var('paged'); ?> <?php query_posts( array( 'post_type' => array('post','page','custom01','custom02'), 'orderby' => 'date', 'posts_per_page' => 10, 'paged' => $paged )); ?> |
‘custom01’,’custom02’の部分には、表示させたいカスタム投稿名を指定します。
複数あるフォームを一つにまとめて、フォーム１ページとして、
お問い合わせフォームを作成するということはよくあります。
条件分岐でフォームを個別に表示させることができたとしても、
お問い合わせした相手に、複数フォームの項目の内容が飛んでしまっては意味がありません。
そこで送信するメールもフォームの内容に合わせて、分岐させる方法を紹介します。
フィルターフック
mwform_auto_mail_mw-wp-form-xxxを使用します。
|
1 2 3 4 5 6 7 8 9 |
function my_mail( $Mail, $values, $Data ) { if($Data->get( 'radio' ) == "フォームA") { $Mail->body = '本文'; // フォームAの本文 }elseif(($Data->get( 'radio' ) == "フォームB"){ $Mail->body = '本文'; // フォームBの本文 } return $Mail; } add_filter( 'mwform_auto_mail_mw-wp-form-xxx', 'my_mail', 10, 3 ); |
上記ではフォーム内にあるラジオボタンの選んだ選択肢でメールの内容を分岐させています。
xxxの部分はフックを適用したいフォームの作成画面に表示されているフォーム識別子を入力します。
WordPressサイト内で別途、違うデザインのページを置くときや、ランディングページの作成、
会員用のページを作成したい時など、静的ページとして構築したい場合があります。
ですが、wordPress では固定ページに登録したスラッグの階層で、
静的HTMLを置いてしまうと、そのページが閲覧できなくなってしまいます。
WordPressをインストールしたフォルダの中にあるindex.phpをコピーして
下記の記述に変更します。
|
1 |
require( dirname( __FILE__ ) . '/wp-blog-header.php' ); |
↓↓
|
1 |
require( '../wp-blog-header.php' ); |
WordPressをインストールしているディレクトリのindex.phpを
静的htmlファイルのあるフォルダ内にコピーして、
header.phpへのパスをディレクトリからのパスに変更してあげることで、共存させることが可能です。
カスタム投稿記事でコメント欄を追加する方法です。
1,WordPressの設定で、
「設定」＞「ディスカッション」で「新しい投稿へのコメントを許可する 」にチェック、
2,function.phpにカスタム投稿にコメントの許可
‘supports’ => array( ‘title’, ‘editor’, ‘thumbnail’, ‘excerpt’, ‘custom-fields’,’comments’ ),
3,コメント用のテンプレ作成
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<?php <div id="comments" class="comments-area"> <?php // You can start editing here -- including this comment! ?> <?php if ( have_comments() ) : ?> <h2 class="comments-title"> <?php printf( _nx( 'One thought on “%2$s”', '%1$s thoughts on “%2$s”', get_comments_number(), 'comments title', 'sparkling' ), number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' ); ?> </h2> <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?> <nav id="comment-nav-above" class="comment-navigation" role="navigation"> <h1 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'sparkling' ); ?></h1> <div class="nav-previous"><?php previous_comments_link( esc_html__( '← Older Comments', 'sparkling' ) ); ?></div> <div class="nav-next"><?php next_comments_link( esc_html__( 'Newer Comments →', 'sparkling' ) ); ?></div> </nav><!-- #comment-nav-above --> <?php endif; // check for comment navigation ?> <ol class="comment-list"> <?php wp_list_comments( array( 'style' => 'ol', 'short_ping' => true, 'avatar_size' => 60 ) ); ?> </ol><!-- .comment-list --> <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?> <nav id="comment-nav-below" class="comment-navigation" role="navigation"> <h1 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'sparkling' ); ?></h1> <div class="nav-previous"><?php previous_comments_link( esc_html__( '← Older Comments', 'sparkling' ) ); ?></div> <div class="nav-next"><?php next_comments_link( esc_html__( 'Newer Comments →', 'sparkling' ) ); ?></div> </nav><!-- #comment-nav-below --> <?php endif; // check for comment navigation ?> <?php endif; // have_comments() ?> <?php // If comments are closed and there are comments, let's leave a little note, shall we? if ( ! comments_open() && '0' != get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) : ?> <p class="no-comments"><?php esc_html_e( 'Comments are closed.', 'sparkling' ); ?></p> <?php endif; ?> <?php comment_form(); ?> </div><!-- #comments --> |
4,single-カスタム投稿名.phpに
インクルードタグを表示させたい場所に追加
|
1 |
<?php comments_template(); ?> |
5,最後に東湖の新規作成画面で、表示オプションのデスカッションにチェックを入れて完了です。
タクソノミーページで子孫要素を取得する方法です。
これが活用できる場面は
（例）
車
↓
→軽自動車,普通自動車,大型自動車,
↓
-→メーカーＡ，メーカーB，メーカーC,…
例えば、軽自動車一覧のページで、メーカー別に軽自動車のページを表示させたい場合に、
メーカー一覧のメニューを表示でき、メーカー別に一覧を表示した際にも、メーカー一覧を表示したままにできる点です。
下記のコードを、使用することで、
タクソノミーページで子孫要素、ここでは（メーカーＡ，メーカーB，メーカーC,…）などの一番下の要素で、
常に表示させておくおことができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?php // タームIDの取得と表示 //現在のタームのidを取得 $taxonomy_name = 'work-cat'; $term_id = get_queried_object()->term_id; $terms = get_terms("work-cat","include=".$term_id); $childs = get_term_children( $term_id, $taxonomy_name ); if(count($childs) > 0){ $parent_id = $term_id; }else{ $parent_id = $terms[0]->parent; } $termchildren = get_term_children( $parent_id, $taxonomy_name ); echo '<ul class="cat-nav">'; foreach ( $termchildren as $child ) { $term = get_term_by( 'id', $child, $taxonomy_name ); echo '<li><a href="' . get_term_link( $child, $taxonomy_name ) . '">' . $term->name . '</a></li>'; } echo '</ul>'; ?> |
ワードプレスのサイトでは普通、ブログ記事のアーカイブページなどは、
ページャなどで推移するかと思います。
無限スクロールを実装すれば、
ページ遷移をしないで、過去の記事をスクロールするだけで、読み込むことができるメリットがあります。
実装するのに必要なプラグインは
「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で取得したい子カテゴリを取得表示が可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php $categories = get_terms( 'タクソノミー', 'hide_empty=0&parent=' . get_queried_object_id() ); if($categories) { ?> <ul> <?php foreach($categories as $value): ?> <li><a href="<?php echo get_term_link($value); ?>"><?php echo $value->name . "(" . $value->count . ")"; ?></a></li> <?php endforeach; } ?> </ul> |
スマートフォンなどでハンバーガーメニューを開いたときの動作の指定は、
様々あります。
横からスライドインするものや、上からプルダウンで降りてくるものなどがありますが、
今回は、メニューが画面全体に表示されて、その間ウェブサイトのスクロールはできないようにするものです。
その際、bodyに対してのOverflow:hiddenを指定すれば、pcやandroid端末で、スクロール禁止はできますが、
iosに対しては動作しません。
ブラウザ側のpassive というオプションが、デフォルトで設定されており、
このオプションがtrueであると、preventDefault(); が含まれていないとスクロールを許可してしまうため、
Over flowが効きません。
対処法は
|
1 2 3 4 5 6 |
■css html, body{ overflow: hidden; } ■js document.addEventListener('touchmove', function(e) {e.preventDefault();}, {passive: false}); |
上記のように記述することで解決が可能です。
サイト制作でアニメーションを製作していると、
ユーザーがスクロールして、特定の要素が画面内に表示された時など、
指定した位置に来た時に変更をして、
任意のタイミングでjsを発火させたい時などがあるかと思います。
そんな時にタグ内の変更を感知して、その瞬間処理を走らせたい場合、
|
1 2 3 |
$('#content').on('DOMSubtreeModified propertychange', function() { //変更された時の処理 }); |
指定する場合は、class名など複数指定できるものではなく、
idなど一意のものに限ります。
クラス名であっても、何番目の要素か指定してあげれば可能です。
|
1 2 3 |
$('.content')[1].on('DOMSubtreeModified propertychange', function() { //変更された時の処理 }); |