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

久しぶりに「Twentyseventeen」を見直して見ようかと思ったけど、気に入ったプラグインの利用で変更する箇所が無いので、アイキャッチ画像で新着情報をフロントページに乗せることを試みた。表示する新着の投稿記事には、一定の期間「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

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

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

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

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

*各丸ボタンに変更(radius: 50%←15%、width: 40px、hight: 50px)

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

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

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

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

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

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

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

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

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

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

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

またまた楽しみが増えた。

WordPressのウイジェットに「SNSボタン」をプラグインなしで追加

プラグイン「AddToAny」をインストールして設定したけど、何故かメインページのボタンだけいつの間にか表示されなくなった。ならばプラグインのような自作の「SNS」をメインページに乗せようとサイト巡ぐりで見つけた「SNSボタンをWordPressの記事やウィジェットにプラグインなしで追加する」をベースにしてほんの少しだけ修正・追加して納得(自己満足)の「SNSボタン」を完成させた。

# WordPressテーマ内(子テーマ)にテンプレート作成、CSSに追記、及び、「icomoon」をアップロード
1.FontAwesome公式サイトの「http://fontawesome.io/」、接続不可で別途「icomoon」をダウンロード・解凍。
2.sns.phpを作成
3.style.cssに記述
# WordPressのウィジェット機能でSNSボタンを設置するため、SNS用のウィジェットを作成
1.functions.phpに記述
2.ウイジェット用CSSを記述
# 参考サイト:Plusers

ここまでは、サイトから得た方法で完璧に「SNSアイコン」をページの下部とかサイドバーに表示させることが出来た。次のステップは独自色を出したかったので、部分的に修正・追加をした。
1.sns.phpのGoogle+をLINEに入れ替えた。

2.style.cssで四角のボタンを楕円形にした。

3.ボタンにカーソルを合わせた時の表示設定欄へ

OSHIVM_SITEのウイジェット専用(フッター)になったけど、SNSボタン追加方法が分かったのでOSBLOG_OSSHINETのサイドバー用のSNSボタンを作成する予定。。。

画像に文字を載せる方法

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

☆ Xfce4-Desktop ☆

簡単に画像に文字を載せることができたのでビックリ!でもサイトのメインページ上の画像に文字を乗せる程度になるのかな?
PS. よくよく調べてみるとブロックエディター(Gutenburg)に画像上に文字を乗せる機能があるとのこと!な〜んだ(T_T)

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

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

致命的なエラーのプラグインは、「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とかバージョンアップが必要になる際には確実に役立ちそう。