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のブロックエディターに画像の上に文字を載せる機能があるとの事、使い方を覚えないと。

WordPress5.2.2+php7.3で致命的なエラーのプラグイン

LAMP Serverパッケージのphp7.2をphp7.3へアップグレードしてからwordpress5.2.2で利用するプラグイン全てを入れて、サイトヘルス(site-health)で確認すると致命的なエラーのプラグインが一つ、警告程度のプラグインが二つ見つかった。

致命的なエラーのプラグインは、「crayon Syntax Highlighter」で調べてみると既に3年ほど放置されているらしいとの事で、php7.3では幾つかのファイルを修正する必要があるようだ。諦めかけていた時に海外のサイトで見つけた。。。

「Crayon Syntax Highlighterの最新バージョンをダウンロードするには?これは最新のCrayon Syntax Highlighterプラグインをダウンロードするためのリンクです: https : //github.com/Crunchify/crayon-syntax-highlighter/releases」

上記の文章が目に留まり半信半疑でZIPをインストール、今までのCrayonを削除してからインストール。

確認したところナナナナんとエラー無し!!!感謝だね。

これでXubuntu18.04LTDの「OSBLOG_OSSHINET(自宅サーバ)」をphp7.3へアップグレードすることができるので、即アップグレード。

WordPress5.2 “ジャコ”のアップデート

このアップデートでは開発者向けサイトや自分のサイトの管理する上で、必要なときに正しい情報を手に入れるための助けになる “Site Health”と言うツールが用意された。ダッシュボードの「ツール → サイトヘルス」でサーバーの設定を確認でき、速度とセキュリティの向上(ヒント)を得ることが出来るようだ。

1] 致命的なエラー保護
Wordpress5.2からプログラムのエラーチェックが入り、リカバリーし易くなった。今まではPHPの記述を間違ったり、プラグインどうしでコンクリフトを起こした場合に画面が真っ白(500エラー)になり直すのに手探り状態だったものが、エラー発生時にメールが管理者に送信され、このメールのリンクをクリックしてリカバリーする事ができるようになった。

2] PHPバージョンのチェック
WordPress5.2からPHPバージョンをチェックしてver5.6.20 以上でないとイントールできなくなった。また、プラグインの方もWordPressの最低バージョンとphpバージョンをチェックしてどちらも満たしていないと有効化できなくなった。

今まで経験したトラブルに対して、このアップデートの”Site Health”があれば少なからず解消できてたはずだね。将来的にPHP7.3とかバージョンアップが必要になる際には確実に役立ちそうだ。