フロントページにアイキャッチ画像付き新着情報

久しぶりに「Twentyseventeen」を見直して見ようかと思ったけど、気に入ったプラグインの利用で変更したい箇所が見当たらないので、アイキャッチ画像付きの新着情報をフロントページに乗せることを試みた。表示する新着の投稿記事には、一定の期間(7日間)「NEW!」マークを付けた。

1] functions.phpに記述

2] 続きを読む(more)の文字数の調整をfunctions.phpに記述

3] style.cssに記述

サイトを巡って見つけたINCLOOP の「WordPressの固定ページにショートコードで特定のカテゴリーの投稿記事(サムネイル、タイトル、投稿日、記事概要のみ抜粋)の一覧を表示する方法」を参考にした。

投稿・固定ページのアイキャッチ画像を非表示

投稿・固定ページのアイキャッチ画像を非表示にしたいと思いサイトで調べると、「sigle.phpのthumbnailの部分を削除又は非表示にする」との情報を得たので早速チェック、ところがthumbnailの記述がなかったので、他のphpを調べてみると「header.php」の中程に記述されてたので「//」で非表示、しかし投稿記事の上部にアイキャッチ画像が表示される。投稿ページ上なので「postフォルダーにあるcontent.php」をチェックするとアイキャッチ画像の部分があったので「<!-- ーー>」で囲って試したところ、今度は間違いなく非表示できた。

1] header.php

2] template-parts/post/content.php

アイキャッチ画像の記述がどこにあるのか焦ったけど、なんとかアイキャッチ画像を非表示できた。

WordPressに自作のパンくずリスト

ブログの階層が「HOME>ディレクトリ―」だけなので必ずしもパンくずリストは必要がないと思うけど。。。

1] functions.phpに記述

2] style.cssに記述

この手の情報は沢山あって目移りしたけど、シンプルな感じで作ることができた。

フロントページに丸型アイコンでディレクトリ別記事一覧

SNSシェアボタンと違いメニューなので「FontAwesome」からメニューのアイコン(unicode)を選んで、CSSは「sns-share」をメニュー用に修正してstyle.cssに記述した。

【 カテゴリー別記事一覧 】

## フロントページの指定場所にソースを作成

メニュー用アイコンのCSSソースは「SNSシェアボタン」作成時と同じ、ただ各アイコンがバラバラなので適当に修正。アクセサリー的なものなので自分の好みで「この辺で良いかな?」で終了。
参考にしたCSSは「sns-share」、とウエブサイトの「「Webllica」 」のUnicodeリストからコードをピックアップ。

投稿記事幅とサイドバー幅を少しだけ変更

今まで変更したいと思ったことが無いコンテンツ部分だが、今回自作のSNSを追加した際に、少し両幅を調整した方が良いと感じたので、Chromeのデベロッパーツールで余白部分のサイズを変へて確認したところ、若干余白幅を狭くすると投稿記事幅が広く感じるのと、サイドバーを少し狭くすると自作のSNSの見栄えが良いかな?と感じたので早速style.cssに変更箇所を記述した。

変更方法が分からないので、余白(左右)の3emを2em、widthを7対3の比率から少しずつ変えただけ、ワイドスクリーンで見るのであれば、max-widthを1100px程度まで広げたら感じが良くなりそう。

WordPressのリビジョン機能と自動保存機能

1] リビジョン機能は下書きした記事を「下書き保存」すると履歴として残す機能で、何回も下書き保存すると何時の間に10~15と溜まっていることがある。
2] 自動保存機能は編集してる最中の記事を自動保存するので、何時の間に膨大な数になっている。

初めてWordpressでサイトを公開した時から、プラグインの「WP-Optimize」を利用して削除していたので良いけど、プラグインに頼らず独自にこの辺の機能を制限するとか無効にすることを試みた。最終的には両機能を制限して便利な「WP-Optimize」で削除することにした。
1. 「functions.php」に以下のコードを追記(無効)

2. 「wp-config.php」に追記(制限)

実際に編集した記事を保存前に消してしまった経験がないので、自動保存の機能が役に立っていると言った感覚がない。本来ならば無効で良いが、「WP-Optimize」の便利な機能(データの最適化等)が別にもあるので、「Wordpressで制限、WP-Optimizeで削除」することにした。

SNSボタンをWordPressの記事やウィジェットにプラグインなしで追加する

どちらかと言うとアクセサリー的なSNSボタンなので、面倒が嫌でプラグインのAddToAnyとWP Social Bookmarking Lightで十分と思っていたが、たまたま「仮想マシン(VM)サイト(日中のみ公開、SNSボタンを追加した時の記事参照)」 のフロントページに表示されないトラブルがあったので、自作のSNSボタンを追加することに決めた。ある程度納得の「SNSボタン」が出来たところで「osblog_osshinet」にもと思ったが、何となく物足りなく感じていたのでこの際、「RSS」とか「Feedly」なども加えて投稿・固定ページとかサイドバーに追加することを試みた。

# sns.phpに追記

# style.cssに追記:

# 子テーマの「content.php」と「content-page.php」に追記

「Googl+、RSS、Feedly」を加え、記事・固定ページに追記して完成!

参考サイト:Plusers Affiliate150  感謝!!

動画(mp4)に字幕を追加する方法

今まで気が付かなかった機能の一つ、投稿記事やウィジェット内の動画に字幕を入れてみた。
1] UTF-8で拡張子(srt)ファイルを作成

2] 字幕の追加のメディアアップローダーから、アップロードし追加

3] 「更新」→「保存」ボタンをクリックしてサイト(投稿)で確認


楽しみが増えたね。

「Gutenberg」ブロックエディター

今まで放置してた「Gutenberg」ブロックエディターの更新が結構あって相当機能がアップしている感じ、そろそろ本格的に使いたいと思っている今日この頃。。。中々踏ん切りがつかなかった理由は、今のうちに試したいソフトやプログラムが中途半端になるのが嫌で止めていた。多くのサイトで見かける「Gutenberg」の記事を見て「いよいよかな?」と、サイトの記事から参考になる部分をピックアップして試して見ることにした。

「従来のテキストエディタと比較すると、かなり直感的に使える。今までプラグインを入れなければ使えなかった機能やレイアウトが、Gutenbergを使うと簡単に導入することがでるようになった。」との事。。。

1] 新規記事に関して

1. 特に見出しで背景色とかボーダーを付け足したりできるようになり、見出しの大きさをはH2~H6まで用意されている。
*中のH3にして小見出しをH4程度を選択した。
*一般的な文章を書くときの大きさは「標準」確認(子テーマで決めた文字サイズ)
2. 一般的な文章を書く時には「ブロック+」内、ブロックは

で囲まれる。
*「enterキー」で「次の段落ブロック」へ、
*「shiftキー」を押しながら「enterキー」で同じブロック内で改行< /br>。

2] 画像に関して

# ブロック内に画像をアップロード
1. 1つ、2つ、ギャラリー風、アイキャッチ画像に文字を乗せる等々設置できる。
2. 画像には全てキャプション(説明文)を付けることが出来る。
3.「タイトル」に入力したテキストはキャプションで使用される。
# 画像の上に文字を載せるには
1. 「投稿」の「新規追加」をクリックした後、タイトルを入れたら本文部分の横にある「カバーの追加」をクリックする。
2. クリックした後、画像をアップロード。
3. 「タイトルを入力…」をクリックしてテキストを入れる。
4. 太字や斜め文字、右寄せや左寄せなどの設定。
5. 実際の画面を見て確認する。
6. 画像背景の透明度を調整する。
*右側に詳細設定するブロックがあるので『背景の透過率』のパーセントを高めると背景が暗く、低くすると背景が明るくなっていく。

3] 主要なSNSを網羅、Twitterなどを埋め込む

1. 「投稿」の「新規追加」をクリックした後、ブロックの左側にある「+」をクリック。
2. 「埋め込み」をクリック
*Youtubeと同様にURLの入力欄と「埋め込み」ボタンがあるので埋め込みたいTwitter等のURLをコピーして貼り付け【埋め込み】ボタンをクリック。

今のところ「OSHIVM.SITE」で試してる最中だけど、まだ使い慣れしてないので結構な手間が掛かり、Clasic Editorであれば簡単だと感じることが多々あるけど、徐々に使いこなせるようになるのかな?いずれOSSHINETの記事は、「Gutenberg」を使って投稿したいね。

WordPressの画像に文字を載せる方法

すっかり忘れてWindowsのpaintnetで画像に文字を貼り付けてWordPressにアップロードしていたが、以前に「画像に文字を載せる方法」なるものを見つけメモっておいたのを思い出し早速VMware Playerのウエブサイトでトライ。

☆ Xfce4-Desktop ☆

簡単に画像に文字を載せることができたのでビックリ!でもサイトのメインページ上の画像に文字を乗せる程度になるのかな?
PS. WordPressのブロックエディターに画像の上に文字を載せる機能があるとの事、使い方を覚えないと。