WordPressサイト内で別途、違うデザインのページを置くときや、ランディングページの作成、
会員用のページを作成したい時など、静的ページとして構築したい場合があります。
ですが、wordPress では固定ページに登録したスラッグの階層で、
静的HTMLを置いてしまうと、そのページが閲覧できなくなってしまいます。
WordPressをインストールしたフォルダの中にあるindex.phpをコピーして
下記の記述に変更します。
require( dirname( __FILE__ ) . '/wp-blog-header.php' );
↓↓
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,コメント用のテンプレ作成
' . get_the_title() . '' ); ?>
1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>'ol', 'short_ping' => true, 'avatar_size' => 60 ) ); ?>
1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
4,single-カスタム投稿名.phpに
インクルードタグを表示させたい場所に追加
5,最後に東湖の新規作成画面で、表示オプションのデスカッションにチェックを入れて完了です。
タクソノミーページで子孫要素を取得する方法です。
これが活用できる場面は
（例）
車
↓
→軽自動車,普通自動車,大型自動車,
↓
-→メーカーＡ，メーカーB，メーカーC,…
例えば、軽自動車一覧のページで、メーカー別に軽自動車のページを表示させたい場合に、
メーカー一覧のメニューを表示でき、メーカー別に一覧を表示した際にも、メーカー一覧を表示したままにできる点です。
下記のコードを、使用することで、
タクソノミーページで子孫要素、ここでは（メーカーＡ，メーカーB，メーカーC,…）などの一番下の要素で、
常に表示させておくおことができます。
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 '
ワードプレスのサイトでは普通、ブログ記事のアーカイブページなどは、
ページャなどで推移するかと思います。
無限スクロールを実装すれば、
ページ遷移をしないで、過去の記事をスクロールするだけで、読み込むことができるメリットがあります。
実装するのに必要なプラグインは
「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で取得したい子カテゴリを取得表示が可能です。
スマートフォンなどでハンバーガーメニューを開いたときの動作の指定は、
様々あります。
横からスライドインするものや、上からプルダウンで降りてくるものなどがありますが、
今回は、メニューが画面全体に表示されて、その間ウェブサイトのスクロールはできないようにするものです。
その際、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対策につながるので、面倒くさがらずに設定をしていきたいですね
display Flex使用時でテキストを上揃え、画像だけを下に揃えで、
テキスト量にかかわらず、常に画像を下にはい位置したいい場合、下記のように記述すると、
実現可能ですが、IEで見たときに画像の下に空白ができてしまう不具合があります。
■HTML
テキストテキストテキスト
テキストテキストテキスト
解決方法は、
画像を囲む親要素に対してmin-height: 0%;を指定してあげることで解決が可能です。
HTML 内に文法のミスが無いか、W#CのHTMLとCSSの文法チェッカーを使用した方もいるかと思いますが、
今回はエディタ上で簡単に行える、htmlのチェックしてくれるプラグインの紹介です。
そのプラグインの名前は「W3C Markup Validator」です。
W3C Markup Validatorの基本的な使い方は、
記述したHTMLをctrl+sなどで保存すると、
エディタの下部にあるインフォメーションに
文法の誤りなどがあると、バリデート結果のパネルが表示され
エラー情報などが表示されます。
また、エラー情報をクリックするとエラーのある場所に飛んでくれます。
致命的なエラーなど、チェックすることができるため、大幅なミスなどを未然に防ぐためにも、入れておきたいプラグインですね。