言わずと知れた “wordpress” はSEO対策にも優れたブログシステムです。
そんな “wordpress” の『よく使用する知っておくと助かる』ことをまとめました。
備忘録として記しておきます。

『よく使用する知っておくと助かる』TIPS

wordpressは投稿ページはRSS出力可能ですが、固定ページはRSS出力できません。
それが、プラグイン「RSS Includes Pages」で可能です。
有効化するだけでカンタンに使用可能です。

コンタクトフォームは別タブで開いた方が離脱しないでいいですよね。

でもrel=”noopener”が必須です！

クラシックエディターからブロックエディタに変更するとやはり不具合が生じるのは仕方がないところ。
ブロック間隔を広くするのはスペーサーでできるのですが、狭くする方法はイマイチありません。
ブロックの間隔調整でbotttomマージンを-50pxくらいにするとプレビューはいいのですが、編集画面の方では重なりすぎてしまい、編集が難しくなります。
HTMLコードを確認すると、改行(br)タグが連続して多数挿入されています。
管理画面「詳細設定」→「サイト一般動作設定」→「標準化設定」にある
“WordPressの自動整形機能を無効にする”
および
“改行は</ br>タグに変換する”
のチェックを外してください。

wordpressによく使うHTML&CSS TIPS

wordpress制作時によく使うCSSをまとめてみました。
wordpressのアップデートがあるたびにせっかく書いたCSSも消えてしまうこともありますので子テーマを作るなどして注意してください。
テンプレートによっては、アップデート対策としてCSS専用の書き込み欄が設けられている場合もありますので気をつけるようにしましょう。
では、よく使用するCSSを備忘録としてメモしておきます。

よく使うHTML&CSS

containを指定すると画像の縦横の比率を保持した状態で常に画像全体が表示されるように画像サイズが調整されます。
アコーディオンの作り方です。

レスポンシブデザインでフルサイズでなく少し縮小したサイズの画像だと画質が粗くなる現象が発生します。

小さな画像を拡大させて表示させるのではなく、あらかじめ大きめの画像を使用し、はみ出る部分については「max-width:100%;」と「height: auto;」で縮小させて表示させることをおすすめします。

結構苦戦しました。
img {
max-width:50%;
height:auto;
}
こんな感じで挿入したら解決！

“カスタムHTML”ウィジェットでの画像表示がされない場合があります。
どうやら相対パスじゃないとダメなようです。
（例えば、 /wp-content/uploads/202○/○○/○○○○○○.jpg）で入力。

クラシックエディタではWidget Logicプラグインを使用するのがベストでしょう。
スマートフォン・タブレット端末では非表示にする（PCでは表示）場合は、ウィジェットのロジックに ! wp_is_mobile() と入力します。
スマホのフッターなどは情報量を少なめにしないとスクロールが長くてタイヘンになりますもんね。

ブロックエディタモードだとコチラですね。

wordpressでLPを制作する際、ヘッダー部分やMENUは必要ないですね。
非表示にする方法ですが、テーマによってはうまくいきません。
Chromeの「デベロッパーツール」を使って、消したい箇所のid属性・class属性を確認します。
PCとモバイルの表示が違うというのはよくあることです。
スマホもしっかりデベロッパーツールでid属性・class属性を確認します。
デベロッパーツールで表示されたようにCSS書き込みしましょう。
よくあるのがスペースや『.』（ドット）の入力ミスです。
気をつけましょう。

そしてCSSを書きましょう。

どれもすごいカッコイイですね。

floatは回り込みのCSSですね！

フローティングバナーの方が鬱陶しくないようです。

WordPressサイトのテーマ/プラグイン/サーバーなどを調べることができる

WP-Searchは、WordPressのテーマ/プラグイン/サーバーなどを調べることができるツールです。
ホームページやブログのURLを入力するだけで、どんなデザインテンプレートを使用しているのかなどの情報が一覧で表示されます。

プラグインの使用あるある

おわりに

wordpressを使えるようになると情報発信を自分で自由にできるのがサイコーです。
どんどん覚えていきましょう。