URLを正規化 WordPress

サイト全体のトップページやページのURL末尾に「index.****」の有り無しや、URL末尾の「/」(スラッシュ)の有り無しでも表示されてしまうことがあります。

このような複数のURLが別々でインデックスされたり、別々のリンクが設定されていたとしたらSEO効果が分散されてしまうために、
ドメインの正規化を行ったほうがよいです。

なので、index.htmlありとなしを同一化する方法を紹介します。

wpフォルダにある.htaccessを編集します。

デフォルトの.htaccessにはRewriteRule ^index\.html?$ / [R=301,L]が記述されていませんが、これを追加します。

■.htaccess

これで、http://www.ooo.jp/index.htmlやhttp://www.ooo.jp/index.phpにアクセスしてもhttp://www.ooo.jpで表示されるようになります。

ローディングアニメーション

情報量が多いサイトだと読み込むまでに時間がかかり、レイアウトが崩れたかのように見えてしまう場合があります。
そんな時、読み込みの時間がかかるサイトやスライダーなどにローディングアニメーションを実装することがあります。

ローディングアニメーションの実装方法です。

仕組みとしては、すべての読み込みが完了するまでに、コンテンツ部分は非表示にして、ローディング画面を表示させている状態になっています。

ローディング用のgifですが、cssでも用意することができます。

CSSで作成すれば、JavaScriptよりも簡単にアニメーションを作ることができる上、ブラウザの処理にも負担をかけないでしょう。

実装には、CSS3のanimation プロパティを使用します。
Loaders.css

id=”loading”に対して、上記のサイトのcssを適用するだけで、いろいろなアニメーションを設定することができます。

HTML5の閉じタグ

HTML5には閉じタグがいるタグと、いらないタグが存在します。

br,img,hr,meta,input,embed,area,base,col,keygen,link,param,source
上記のタグは/を末尾につけることで終了タグとの区別化をしても大丈夫です。

終了タグを省略できるタグ
li,dt,dd,p,tr,td,th,rt,rp,optgroup,option,thread,tfoot

リストの場合だと
閉じタグ</li>を省略することも可能です。
上記のように記述することでdisplay:inline-block;などの隙間をなくすことができるので、テクニックとして覚えておくとよいかもしれません。

股閉じタグを省略して、読み込みの高速化も可能です。

WordPressの投稿プレビューのURLを変更する

WordPressのサイトアドレスの変更などで、
WordPress アドレス (URL)
サイトアドレス (URL)
が一致していない場合、投稿のプレビューが表示されないといった問題が起こることがあります。

サイトアドレスは変更できないけれども、プレビューが見られないという問題を解決したい場合は、
プレビュー時のみWordPress アドレスで表示するという方法があります。

function.phpに下記の記述をすることで表示アドレスを変更できます。

上記の設定で下書きのプレビューや、投稿のプレビューの問題が解決すると思います。

CSSでトリミング object-fit

web上で画像の一覧を表示する時な、画像のサイズが同じの場合、並べても整ってくれますが、
それぞれの画像のサイズが同じではない場合、崩れたりしてしまいます。
ですが、すべての画像をリサイズする場合は時間がかかるということもあります。

そんな時はCSSでトリミングが可能です。
「object-fit」というプロパティーを使って、画像の縦横比を維持しながらトリミングする方法を紹介します。

横幅が400px、縦幅が300pxの画像の場合、下記のように指定すると縦につぶれたように表示されてしまします。

しかし、画像に対して object-fit: cover; を指定すると

縦横ともに200pxの画像としてトリミングして表示されます。

便利なプロパティですが、
object-fit、object-position プロパティーはIEやEdgeに対応していません。
対応させるには、object-fit-imagesを読み込ませる必要があります。

https://github.com/bfred-it/object-fit-images

CSSで object-fit の記述とfont-family を指定します。
そして、IEに対応させるためのfont-familyに’object-fit: contain;’ を記述します。

上記でIEやEdgeで対応させることができます。

jQueryで特定の要素を包容する

特定の要素に対して閉じタグを付与することが可能です。
システムで吐き出される要素や、変更したい場所が膨大にある場合など時間がかかる場合など利用できるかもしれません。

上記を実行すると、下記のようになります。

また、.wrapAllを使用すれば特定の要素のみを一個にまとめることができるので、
jsでまとめて置換したり、移動など、特定の指定をしたい場合などに役に立ちます。

.wrapAllで指定すれば、上記のようにspanタグをdivで包容することができクラスも指定することができます。

jQueryでDOM要素を削除

jQueryでDOM要素を削除する方法です。

display:none;などで要素を非表示にすることで、消したように見せることはできますが、
jsでdisplay:block;や他のcssが利いてしまっていて、要素を非表示にできない場合などに、
使用してみるといいかもしれません、

jQueryの要素の削除には、
・remove()
・empty()
・unwrap()

などがあります。

■.remove()
remove()は、指定した要素ごと削除します。
#boxごと子要素も含め削除されます

■.empty()
empty()は、指定した要素の子要素を削除します。
id=”box”は残ります。

■.unwrap()

.unwrap()は親要素のみを削除します。
id=”text”を囲っていた#boxが削除されます。

jQueryでの要素に連番を付加する

jQueryを使って連番でidやクラスを追加したりする方法を紹介しします。

使用場面では、<li>などです。

これらのリストに対し、以下のスクリプトを実行することで、
連番でのidやクラスを追記することができます。

idで連番を指定するときは.attr(‘class’,’list’ + (i+1));のclassをidに変更で可能です。

連番で制御できるためcssの適用や、jsでの指定が楽になります

jQueryのfind()で子要素を取得する

find()メソッドは、対象となる要素から下にある階層から目的の「子要素」を取得することができます。

上記では「.list」が付与されたulタグの子要素、「find(‘a’)」と記述することで階層下のaタグが習得できます。

■複数の属性を使った子要素の取得方法

find(‘list-01, .link’)と連続で記述することで、複数の要素を取り出すことができます。

指定したページでメイン画像を切り替える

トップページのメインビジュアルとは別に、それぞれの内部ページに対して、違うメイン画像を表示させたい場合があるかと思います。

wordpressなどでは、phpの条件分岐でページ単位にコンテンツを表示させたりできますが、

静的なhtmlやショッピングサイト構築のサービスなどの条件で、指定したページでメイン画像を切り替えたい場合、

urlで条件分岐させて、動的に画像を切り替えることが可能です。

上では「head-image」に対してそれぞれのurlに対して画像が挿入され切り替えるようになっており、
それ以外のページでは、else ifで「display=”none”」を当てて表示されないようになっています。

また、背景色なども指定できるので、ページごとの装飾も可能です。