長時間マウス持っていると右腕が痛くなることが最近の悩みです。どうやらマウス腱鞘炎という物のようですね。
どうしてもPC作業が長くなるため、作業環境を整えるのは大切だと感じました。早速Amazonで指だけで操作できるトラックボールマウスを購入してみました。どれだけ改善されるか楽しみです！
今回はサイトにアクセスした際に、フロントページにロゴを表示する機能を紹介します。
まずは完成形は以下のような感じです。
高機能である有料テーマの中には標準機能で搭載されているテーマもありますが、値段もそこそこしますので、自分でコードを書いていきます。無料（今回はCocoon）のテーマでも実装できますのでこのような案件があればお試しください。
必要になる知識/プラグイン
- HTML、CSS、jQueryの知識
- プラグイン「Simple Custom CSS and JS」
- おまけ：プラグイン「WP Code」
作成手順
まず「Simple Custom CSS and JS」で以下3つのコード書いていきます。テンプレートファイルに書いても実行できますが、このためだけに子テーマにテンプレートをコピーして編集するのも管理が複雑になるのでプラグインを使っていきます。
①画像を表示させるHTMLを追加
「Simple Custom CSS and JS」に画像を表示させるコードを追加
<div class="start">
<p><img src="ここに表示したいロゴのURLを記入" alt=""></p>
</div>比較的に簡単なコードです。
②画像の位置、レイアウトを調整するCSSを追加
前半がロゴが無い時に適用されるCSS、後半がロゴを中央に表示させるCSSです。
.start {
background: #FFF;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 9000;
}
.start p {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: none;
z-index: 9999;
width: 280px;
}③処理を実行するjQueryを追加
WordPressはjQueryに対応しておりますのでそのままコードを書いています、
setTimeout()は任意のタイミングで処理を実行できる便利なメゾットです。
開始0.5秒でロゴが表示され、2.5秒で背景を白くするCSSが適用されます。
$(function() {
setTimeout(function(){
$('.start p').fadeIn(1600);
},500);
setTimeout(function(){
$('.start').fadeOut(500);
},2500);
});以上で設定が完了しました。
全ページにロゴが表示されてしまう問題を改善
さてここで問題があります。上記設定でロゴを表示できるようになりましたが、今の状態ではページを移動する度にロゴが表示されてしまうため使い勝手が悪いです。できればフロントページにアクセスしたときだけ表示させたいので、条件分岐を使いましょう。
先に使った「Simple Custom CSS and JS」はPHPを設置できますが、header内に設置できません。
ここでプラグイン「WP Code」を使用します。このプラグインはheader内にもPHPを書けるプラグインです。
フロントページのみHTMLを適用させるコードをheader内に書いています。便宜上コードの頭とお尻の<?phpと?>は書いていますが、このプラグインを使う場合は自動的に付加されるので不要です！
※書いたら先のHTMLコードを削除してください。
<?php
if ( is_front_page() ) {
?>
<div class="start">
<p><img src="ここに表示したいロゴのURLを記入" alt=""></p>
</div>
<?php
}
?>これでOKです！最後スニペットを有効にするのをお忘れなく！フロントページだけに表示できるようになりました。
まとめ
今回はCocoonでの実装でしたが、恐らく他のテーマで同じように実装可能なので。お使いのテーマで構築できると思います。
この機能があるだけでもサイトがリッチに見えますのでお試しください。
もっとカスタマイズすれば1度表示すれば、1日は表示されないcookie設定などもできそうです。
今回わざわざコードを書きましたが、プラグインでも十分代替できるものがありますのでバランスを考えお使いください！
