WordPress ショートコードで『ブログカード風』『関連記事一覧』を表示

WordPress Twenty Seventeen
Twenty Seventeen のカスタマイズ
ショートコードで『関連記事一覧』を表示
 
任意のページの、任意の場所に、任意のカテゴリーの『記事一覧』を、任意の数だけ、サムネイル付きで表示する『関連記事一覧を表示するショートコード』を作成した。 記事一覧は、『ブログカード』風のデザインにした。
 
ショートコードで、ブログカード風『関連記事一覧』を表示した例。
ショートコードで『関連記事一覧』を表示 

“WordPress ショートコードで『ブログカード風』『関連記事一覧』を表示” の続きを読む

Twenty Seventeen 文字と画像が被る 問題への対処

WordPress Twenty Seventeen
文章の一部に画像が重なる問題への対処
子テーマの style.css を変更
 
記事や固定ページの作成で、文章の下に画像を挿入した場合、画像が文章の下部に重なってしまう。
文字と画像が被る
 
以下に、この現象が発生するケースと、対処方法を記録。

“Twenty Seventeen 文字と画像が被る 問題への対処” の続きを読む

Twenty Seventeen 「続きを読む」をクリックした時、ページの先頭にジャンプ

WordPress Twenty Seventeen
画面制御ボタンのカスタマイズ
「続きを読む」をページのTOPにする
 
WordPressでは「続きを読む」をクリックした場合、まさにその続きの場所から表示される。これを『利便性』の観点から、ページの先頭から表示されるように変更する。

“Twenty Seventeen 「続きを読む」をクリックした時、ページの先頭にジャンプ” の続きを読む

Twenty Seventeen ページトップへ戻るボタンの設置

WordPress Twenty Seventeen
画面制御ボタンのカスタマイズ
ページトップへ戻るボタンの設置
 
ページをスクロールすると、画面右下に「トップへ戻る」ボタンが浮かび上がってきて、これを押すとページの先頭に戻るボタンを設置した。
以下に、この方法を記述。

“Twenty Seventeen ページトップへ戻るボタンの設置” の続きを読む

WordPress 軽量のソーシャルボタンを自作し、任意の場所に表示する

WordPress Twenty Sixteen カスタマイズ
SNSボタンをまとめたショートコードを作成し、
任意の場所に表示
 
①.「PageSpeed Insights」で測定すると、【 Poor 】と遅い。
②.「WP Social Bookmarking Light」プラグインを使用しているが、表示位置が自由にならない。
 
軽量のソーシャルボタンを自作

という理由で、最も軽いソーシャルボタンをPHPファイルで作成し、SNSボタンを投稿ページや固定ページの任意の場所に、PHPファイルを動かす 『ショートコード』 で表示できるようにした。

 
以下、ソーシャルボタンをPHPで作成し、そのPHPファイルをショートコードにする方法を纏めた。 “WordPress 軽量のソーシャルボタンを自作し、任意の場所に表示する” の続きを読む

Twenty Seventeen メニューバー高さと背景色を変更する

WordPress Twenty Seventeen
画面デザインに関するカスタマイズ
メニューバーの高さと背景色を変更する
 
 
Twenty Seventeen のヘッダー画像の色調に合わせて、メニューバーの背景色を変更するとともに、ナビゲーションメニューの高さがありすぎるので、高さを狭めるカスタマイズを行った。

“Twenty Seventeen メニューバー高さと背景色を変更する” の続きを読む

リンクの 文字・色・下線 のカスタマイズ

WordPress Twenty Seventeen
画面デザインに関するカスタマイズ
リンクの 文字・色・下線 のカスタマイズ
 
「Twenty Seventeen」のリンク文字は黒で、そこに黒い下線が引かれてリンクの目印となっている。また、リンクにマウスを合わせると、下線がひとまわり太く表示されるように設定されており、さらに、背景色を変更してみると白の下線も引かれている。
以下に、これらのカスタマイズ要領を記す。

“リンクの 文字・色・下線 のカスタマイズ” の続きを読む