使いやすいプラグインを探すのは大変で多すぎるとメニューがごちゃごちゃになるので、シンプルに使えるモノを中心に個人的趣味での選択です。
アイキャッチを自動で作成してくれる
プラグインの中ではSEOとして最低限必要なものをセット出来るのでミニマムさが良いと思います。
サイト構築時はカスタマイズの更新がキャッシュに残るので構築時は使用しない方が良い
ブロックテーマをカスタマイズする場合に必要
休日をブロックで表示したり、イベント情報をカレンダーで表示したりできる。シンプルだけど使えます。
Gutenbergに対応したブロックを追加します。
ネットで探したらプラグインを作る手法が説明されていたので紹介。
とりあえずキープという事で、
プラグインを作る基本的な記述とサンプルのプラグインもダウンロード出来るので、とても参考になります。
wordpressのスライダーはプラグインだったり、ブロックエディタの中で使えるやつだったりといくつも種類があって困ります。
プラグインには独自のメニューでプラグインの設定画面で設定して「ショートコード」でコンテンツ内に記述する
と２種類の設定方法があり、どちらも提供しているプラグインもあります。
いろいろと調べていった結果、こんなの多すぎて困るって事です。
こちらで、Meta suraidaaのマニュアル的に解説したサイト
コメント付きのスライダー
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
もう少し調べてみる必要もあるけど、現時点では文字を一緒にスライドさせる事が出来るので、Master Sliderがベストだと思います。
するとどこかで見たわ姉は細い銀いろの空から、さっきの入口から暗い牛舎の前へまた来ました。
そういうふうに、眼の前を通るのですから、この次の理科の時間にお話します。
大きなのがいるんだから小さいのもいるんでしょうか女の子がそっとカムパネルラにたずねました。
あら、蠍の火だなカムパネルラがまた何気なくしかるように叫びました。
サイトの情報を印刷して利用する場合にヘッダーやフッターなどが入って欲しい情報の必要以上にデータ量が多く紙の無駄が発生するので、印刷に適したサイトにするのも良いと思います。
ってな事で、まずはサーチです。
このサイトでは印刷用のスタイルの設定方法からブラウザの開発ツールを使用したデバッグの方法まで書いててすごい役に立ちます。
<style media="print">
.no-print {
display: none;
}
</style>という事で、基本的には以下のコードをCSSで使うという事です。print.cssというプリンター用のCSSでまとめてやるのも良いですね。
読み込み中に表示されるローディング画像について
<div class="loading">
<div><img width="75" height="26" class="loading-logo" src="./images/logo-dark.png" alt="Nixe - Demo 2" /></div>
</div>.loading {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 10;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
animation: fadeOut 1.5s 2.5s forwards;
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
visibility: hidden;
}
}
.loading-logo {
opacity: 0;
animation: logo_fade 2s 0.5s forwards;
width: 175px;
}
@keyframes logo_fade {
0% {
opacity: 0;
transform: translateY(20px);
}
60% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
}
}ブロックテーマの場合に上記HTMLを記述する場所が見つからないとかどこに書くと良いのか？になります。
答えは、function.phpに追加で記述して、bodyの最初に記述するようにします。
/**
* bodyタグ開始に挿入
*/
add_action( 'wp_body_open', function() {
?>
<!-- ここから挿入したいソースコードなどスタート -->
<div class="loading">
<div><img width="75" height="26" class="loading-logo" src="http://test.beabo.net/wp-content/uploads/2024/10/och_logo.png" alt="大分センチュリーホテルのホームページへようこそ" /></div>
</div>
<!-- ここまで -->
<?php
});
こうする事で、記事のHTMLを読み込んでページを作成する時間にローディング画面が表示されることにより、待ち時間を感覚的に短くする事が期待できます。
基本的な手法なので、ローディング画面の画像やCSSでのアニメーションを採用するとかするとサイトのブランディングがより進むと思います。
animation: fadeOut の部分が時間の設定になるぅ
参考サイト
function.php にパンくずリストを作るコードを追加して、ショートコード作成をして読み出す
<?php breadcrumb(); ?>これだとブロックテーマだと使用出来ないので、ショートコード作成する。
【WordPress】超便利! 関数を呼び出すショートコードの使い方
[breadcrumb]記事を読んだ時にトップに戻るスクロール
/**
* bodyタグ開始に挿入
*/
add_action( 'wp_body_open', function() {
?>
<!-- ここから挿入したいソースコードなどスタート -->
<a class="pagetop" href="#"><div class="pagetop__arrow"></div></a>
<!-- ここまで -->
<?php
});
/* ページトップに戻るボタンの設置*/
html {
scroll-behavior: smooth;
}
.pagetop {
height: 50px;
width: 50px;
position: fixed;
right: 30px;
bottom: 30px;
background: #fff;
border: solid 2px #000;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
/* 矢印のデザイン */
.pagetop__arrow {
height: 10px;
width: 10px;
border-top: 3px solid #000;
border-right: 3px solid #000;
transform: translateY(20%) rotate(-45deg);
}
/* マウスオーバーで色を変える */
@media (hover: hover) and (pointer: fine) {
.pagetop:hover, .pagetop:hover .pagetop__arrow {
border-color: #3293e7;
}
}印刷用CSSの製作
印刷用にprint.cssを作成する
最終的にはprint.cssといるファイルにしてトップで読み込ませる
<link rel="stylesheet" type="text/css" media="print" href="print.css">
タイトル・フッターを作る
印刷時に非表示のブロックを消す
※参考ページ（基本）
https://zenn.dev/azukiazusa/articles/d8459f81d52d59
※印刷にも対応したウェブサイトを作成する方法
https://www.itti.jp/web-design/how-to-create-a-print-ready-website/
印刷用CSS(@media print)の設定とデバッグ方法って? HTMLの印刷崩れを解決
https://webtan.impress.co.jp/e/2015/07/28/20508
※ずれなくWebページを印刷させるためのCSSティップス集
https://qiita.com/silane1001/items/618099c67c7426522dc7
印刷用CSSの定義を指定する
@media print {
.no-print {
display: none;
}
}<p class="no-print" style="color: red;">ここは印刷時に非表示になります。</p>参考 【HTML/CSS】パソコンとスマホで表示内容を切り替える方法
PCのみ表示する、スマホのみ表示するというのをメディアクエリを使って
<div class="for-pc">
パソコンの時に表示する内容
</div>
<div class="for-sp">
スマホの時に表示する内容
</div>.for-pc { display:block; }
.for-sp { display:none; }
@media only screen and (max-width : 767px){
.for-pc { display:none; }
.for-sp { display:block; }
}767pxを境にして切り替えるって事です。
画像にオーバーレイしてテキストを表示させる
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_slidebottom
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
opacity: 0.8;
}
.container:hover .overlay {
height: 100%;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>