「Enlighter」はクラシックエディター、ブロックエディター「Gutenberg」の両方に対応

以前のプラグイン「Crayon Syntax Highlighter」がWordpressのバージョンアップでインストール出来なくなった。記事の中にHTML、CSSやJavaといったソースコードを書き込むことが多いので重宝してたプラグインだったので、一時は途方に暮れたけど同じ機能を持つプラグイン「Enlighter – Customizable Syntax Highlighter」を見つけ試した。

WordPress

-WP-Customizable Syntax Highlighter-

この「Enlighter」はビジュアルエディター「クラシックエディター」、ブロックエディター「Gutenberg」の両方に対応しているところとか、使い方も「Crayon」と同じように簡単、エディター内で専用のショートカットを呼び出し、コードを記述してスタイルを決定するだけで記事にソースコードが綺麗に埋め込めるなど素晴らしいの一言。

当サイトで表示してる設定方法

Appearance
  Code indentation 4Spaces→2Spaces          
Button Toolbar
  Always hide the toolbar

上記は見た目に関わる最も重要な設定なので、お好みで変更した後は無視してもOK!。

便利で使い方も簡単なキャプチャーソフト「WinShot」

スクリーンショットやアクティブなファイルなどを撮る時に便利なフリーのキャプチャソフト「WinShot」は使い方が簡単、特定のホットキーを使うことで連続キャプチャや範囲指定キャプチャ・リサイズなどの加工を行ってから画像ファイルに保存することが可能なキャプチャソフト。

Windows

capture-softweare WinShot

 

  「Winshot」の設定
① 基本設定で保存設定を削除して保存先を追加     
② ホットキーを設定
 ショートカットキー(プレビューキー:アクティブウインドウ)     
③ JPEGで保存(矩形範囲指定)を設定

 

画像にする画面を表示させて、設定したショートカットを入力、又、アイコンを右クリックした際に表示される項目の中にある「クイック設定」でも設定内容を変更することができる。
「Ctrl+無変換」にして、画像にする画面を表示させるとマウスカーソルが「+」になるので、起点と終点でマウスをクリックして指定、その範囲を画像として保存する。
さらに連続キャプチャ機能や一定の時間が経過した後に画面キャプチャする機能も搭載されてる。
Windows10のスクリーンショットではできない、マウスカーソルを含んだ画面キャプチャ、プルダウンメニューの画面キャプチャも行える。

Windows付属の画像の編集や加工のソフトは、面倒で使い勝手が悪いこともあり当初から「WinShot」を愛用してる。

キャプチャーした画像を「Paint.Net」(画像編集ソフト)で編集・加工

簡単な加工ができればと思って選んだ「Paint.Net」は有料・フリーとある。主にブログ用に画像を編集するためのソフトなので、画像のリサイズやトリミング程度の編集ができるフリーで使えるソフトがあれば十分!と言うことで選んだ。使ってみて無料でこれだけできれば満足できる。

Paint.Net

リサイズやトリミングの編集・加工が出来る有料・無料のソフトー

縦横比を維持する」にチェック
 現在の画像の縦横比を維持したままリサイズ、ファイルサイズが小さくなるのでよく使う機能。
キャンパスサイズ」という機能、画像を指定したサイズで切り取る。
編集範囲を選択、選択した部分をトリミング、編集・加工することができる。

【編集・加工ソフト】

画面左上の「ツール」の中に「四角選択」「なげなわ選択」「楕円選択」「魔法の杖」等の選択するツールがあり、使い分けする。
まだまだ多くの機能をフリーで用意されてる。例えば顔にモザイクかけたり、魔法の杖で近い色の選択したり、許容範囲を大きくしたり小さくしたりの選択範囲を調整したり、画像の「キャンパスサイズ」の変更等々ができる。
使い方での編集・加工例として、画像の「キャンパスサイズの変更」でいらない部分を切り取っって、「魔法の杖」でバックパック以外の部分を「調整→セピア」で加工して、「ツール→テキスト」で画像に文字を入れる。最後に、ブログで使用するために「リサイズ」をして完成!

確かに機能が限定されてるけど、これだけ使えれば予想以上、もちろん有料ソフトは高機能が用意されて綺麗な加工もできるらしいけど、有料ソフトにするのはチョッと・・・

トップページ、固定ページ、投稿ページ等の「投稿、投稿日、投稿者」文字を非表示にする。

WordPressのテーマ「Twenty Seventeen」のトップページ、固定ページ、投稿ページ等に「投稿」とか投稿者文字が表示される。サイトを公開してこれらの表示がデザイン的に邪魔な感じなので非表示にした。

固定ページ、投稿ページのカスタマイズ

―タイトル、投稿者、投稿日を非表示-

特にトップページの「投稿は」見出し(h2)なので、コード自体を削除。

① 特にトップページの「投稿」は見出し(h2)なので、コード自体を削除。
 #index.phpを子テーマにコピー
  wordpress/wp-content/themes/twentyseventeen-child/index.php
 #下記のコードを削除
  <header class="page-header">
  <h2 class="page-title"><?php _e( 'Posts', 'twentyseventeen' ): ?></h2>
  </header>

 #以下のコードを、functions.phpに追加 ←投稿者名
  function twentyseventeen_posted_on(){
   echo '<span class="posted-on">' . twentyseventeen_time_link() . '</span>';  }

以上、トップページ、固定ページ、投稿ページの「投稿者」は削除される。

カスタマイズから追加CSSで固定ページ及び投稿ページの「entry-title」を非表示にする。   

 1.TOP記事(固定記事)のタイトルのみ非表示
  .home .entry-title {
   display: none;
  }
 2.全固定ページのタイトルが非表示
  .page .entry-title {
   display: none;
  }
 3.全投稿ページのタイトルが非表示
  .post .entry-title {
   display: none;
  }
 4.特定の投稿IDで非表示 .post-(例:post=123)
  .post-123 .entry-title {
   display: none;
  }
 #固定ページのみ非表示、投稿ページは非表示にしたいページのみ。 

カレンダーから移動した時に投稿ページに表示される「日:カテゴリー」とアーカイブページに移動の「カテゴリー名」は必要かな?目障りであれば、ファイル修正又はStyle.CSSに追加して非表示可能。

APG font-awesome-collectionの代替えでFont-awesome-free」-式を選んだ。

プラグインのAGP font-awesome-collectionを今回もインストールしてメニューとかサイドバーへアイコンを貼り付けたが、カスタマイズから画面を見ると上部にエラー表示される。今のところ問題は無いようだが、いずれ互換性が無いと言うことで利用不可になる可能性がある。又、幾つかのFont Awesomeのプラグインを試したが、なんとなく使いずらい感じなのでプラグインを使わない方法にした。そこで最も簡単なFont-awesome-free」一式をダウンロード、Wordpressにアップロードして使うことを選んだ。

– Font-Awesome-Free –

ダウンロードした fontawesome-free-5.2.0-web.zipを解凍

 #Font Awesomeのダウンロード先:
  https://fontawesome.com/docs/web/setup/get-started

Font Awesomeを使う準備

 1.子テーマのディレクトリ(フォルダ)内に font-awesome ディレクトリを作成。
  /wp-content/themes/twentyseventeen-child/font-awesome
 2.その下に上記①で解凍したディレクトリの下の /webfonts/ 全てと /css/ ディレクトリの中の all.min.css をコピー。

functions.phpに以下を記述。

 wp_enqueue_style( 'font-awesome', get_stylesheet_directory_uri() . '/font-awesome/css/all.min.css', array());

Font Awesomeで表示したいアイコンを探し、クリックで表示されるページのコード(タグ)をコピーして任意の場所に貼る。

 #Font Awesome
  https://fontawesome.com/v5.15/icons?d=gallery&p=2
 #Font Awesome アイコンフォント一覧 [Free (フリー) のみ]
  https://johobase.com/font-awesome-icon-font-list-free/

# 以下のようにコード(<i class=”far fa-smile”></i>)を貼り付ける。      
    このように 表示できたら成功。

メニューへのアイコン、サイドバーにも難なく張り付けることが出来た。たしか、「Free CDN」とかがあるようだけど、詳しくないので上記の方法を選んだ。

ApacheのopenSSLでBasic認証を作成して秘密のフォルダーを作る。

ApacheでBasic認証作成

Apache\conf\openss.cnfでBasic認証を作成してWordPressのディレクトリ に「秘密の部屋」的なフォルダー作成する。

管理者権限のコマンドプロンプトでPasswordを作成

x:> x:\xampp\apache\bin\htpasswd -c x:\xampp\apache.htpasswd user名」を入力してEnterキーを押す。
 1.New password: →入力
 2.Re-type new password: →入力
 3.次のように表示されればOK。→Adding password for user名

.htpasswd(ユーザ名:xxxxxxxxxxxx)を「htpasswd.txt」に変更

x:\xampp\apacheに.htpasswd(ユーザ名:xxxxxxxxxxxxxxx)ができてるので「htpasswd.txt」に変更して、FTPでBasic認証を施したいディレクトリーのフォルダー内にアップロードする。
(他:mcオプション(MD5)、Passwordの暗号はどちらも可)

サーバ上の絶対パスの確認とhtaccess.txtの作成

 <?php
  echo dirname(__FILE__);

「path.php」と名前をつけて保存して、FTPでWebのルートディレクトリにアップロードして、ブラウザでアクセスすると、「サーバー上の絶対パス」が表示されるのでコピーして前もって作成した「htaccess.txt」内にAuthUserFileの絶対パスとして張り付ける。

htaccessのフォームの作成

AuthUserFile サーバー上の絶対パス/フォルダ名/.htpasswd
AuthName "Enter your ID and password."
AuthType Basic
require valid-user

次に「htaccess.txt」をhtpasswd.txtがあるディレクトリにFTPでアップロードしてから、拡張子を「.htpasswd」と「.htaccess」にそれぞれ変更する。

以上でBasic認証を施したディレクトリが完成。このフォルダには、参考になるPHP、CSSの資料を入れて、いつでも取り出せるようにしてる。

早朝の散歩コースは思い出深い祐天寺栄通りをまず通過して

家を出て東横線祐天寺駅へ向かうのに二通りの商店街を通るコースがあって、どちらもほぼ同じ距離で約4~5分で行くことができる。その一つが栄通り商店街で以前は結構な賑わいを見せていたが、バブルが弾けた後は、あれよあれよという間にシャッター通りと言った感じで行きかう人もまばらになってしまった。

バブル後半期に商店街名を「テラ通り」と替えて豪華な看板を掲げたり、レンガ風の通りにしたり又、前会長のスーパーを先頭にビルが建ち始めたがバブルが弾けた途端に主だった商店の倒産、商店街を通るときなど血生臭い風景を見たりしたのでこの先どうなるのかと思ったけど、案の定生鮮食品関係のお店や笑笑などの店じまいで瞬く間に様変わりして、廃墟の商店街と言った感じになった。

現在はマルとの散歩コースになってから見ると少しずつ変わり始め接骨医院(旧笑笑)、レストラン、コインランドリー、お弁当屋さんが目に付くようになった。朝の散歩ではお弁当屋の従業員が出たり入ったり、接骨医院の前では10人ほどの老人男女がたむろしてるし、夜は夜でカラオケ、バーなどが入ってるビルがあり、少しずつだけど、行き交う人達が結構増えた。駅からの商店街入口に建設中のビルやドトールコーヒーショップがあるので昔のように食料品等の店が増えて活気ある商店街に戻ると良いね。しかし、コロナ禍でどうなる事やら。。。

ローカルのFTPサーバとしてFTP FileZilla Serverを設定

Windows

FTP FileZilla Server

基本的なサーバ用の設定はなされてるので、メニュー「Edit」のUsersとSSL/TLS Setting及び、インターネットからのアクセスのため「Passive Mode」を設定。

FTPアカウントの作成

 1.「FileZilla server」画面で、「Edit」→「Users」をクリック             
  1)アカウントを作成する前に「テスト用のFTPアカウント」を削除
  2)「anonymous」を選択して「Remove」を削除
 2.「Add」をクリックして作成したいアカウント名を入力して「OK」
 3、「Password」にチェックして、アカウントのパスワードを入力
 4.作成したアカウントにアクセス許可するフォルダを指定
   (x:\xxxxx\xxxxx)してOKをクリック
 5.読み書き権限の設定
  「Files」と「Directories」の全て項目をチェック(✔)
 6.最後に「OK」をクリック

インターネットからのアクセスの設定

 1.モデム側の設定
  「詳細設定」→「ポートフォワード」で「4001」TCPを有効にチェック(✔)     
 2.FileZilla Passive Modeの設定
  1)「Edit」→「Setting」→「FileZilla Server Options」を開く
  「Passive Mode Settings」をクリック
  2)「Retrive external IP address from」を選択してhttp://ftp.osshinet.com
に訂正してチェック(✔)
  3)「Use custom port range」に「4000」~「4002」を入力
 3.FTPクライアントからのアクセス
  サーバのホスト名、ユーザー名、パスワードを入力し、「PASVモード」をオンにしてログイン。

公開サーバでは無いので、LANからのアクセスは「SSL/TLS Setting」で「FTP over SSL/TLS」、外出先からは「PASVモード」でと言った設定になる。

「OP25B」とSSLのサポートでMercuryMailサーバを運用

Windows

【MerccuryMailサーバの設定】

メールサーバを公開するのに必須な条件は「OP25B」とSSLのサポート。無料のダイナミックDNSのドメインでMyDNS.JPのIDを取得していれば、実験的に「OP25B」の利用許可してるメール専用のドメインを利用できる。SSLのサポートは、ドメインのLetsencryptの証明書をメールサーバ専用として使用することにした。

LAN内で使えるように設定

 1.「SMTP」と「POP3」を有効にする。
 「Configuration」メニューから「Protocol Modulees…」をオープン、MercuryS,MercuryP,MercuryEを選択してその他のチェックを外す。
 2.Mercury/32を再起動(「停止」→「開始」)して、再度「管理画面」を表示

LANからのみメールを送信

 1.「Configuration」「MercuryS SMTP Server」を選択
 2.「Connection Control」タブをクリック、「Use strict local relaying restrictions」を選択し、「Add restriction」をクリック
 3.メール送信を許可するIPアドレス「from」~「to」に127.0.0.1の設定
 4.「Allow connections」を選択してLAN内のIPアドレス192.168.0.1~192.168.0.255を許可、入力後「OK」をクリック

メールアカウントの設定

 1.「Configuration」から「Manage local users…」を選択
 サンプルアカウントの「newuser」を選択して「Delate」をクリック
 2.「Admin」を選択して「Change」をクリックして「Mail password」にパスワードを設定、以下同様に「Postmaster」も設定。
 3.新規の登録は@ドメイン前の「Usersname」、受信する時の「password」を入力して「OK」をクリック

ドメインの設定

 1.「Configuration」から「Mercury core module…」を選択
 2.「Local domains」タブをクリックして設定画面を表示
 3.「localhost.net」を選択し「Remove entry」をクリックして削除、同様に「localhost.org」も削除。
 4.「Add new domain」をクリック
 5.「Local host or server」には「localhost」と入力し、「Internet name」はサーバーネームを入力して「OK」をクリック。←[osshinet.com]

エイリアスの設定

 1.Adminとpostmasterをwebmaster宛に転送するように設定
 2.「Configuration」から「Ariases…」を選択して「Add new alias」をクリック
 3.「Aias」に「Admin@localhost」、「Real address」に「webmaster」と入力して「OK」以下同様に「postmaster@localhost」も同じように設定。

「OP25B」の設定

 1.「Mercury SMTP Server」から「General」→「Alternate port」欄に「587」入力
 2.「Configuration」メニューから「Protocol Modulees…」をオープンして、「Mercury SMTP Client (relay version)」を追加する。
 3.Smart host name: ←「OP25B」のアドレス
 4.Connection port/type: ← 587
 5.Login username:  Password: ← MyDNS.JPのAccountID、Password

SSL/TLSのサポート

「MercuryS」のSSLタグをクリック、「Crt」と「Key」を登録して「OK」        
「MercuryP」のSSLタグをクリック、「Crt」と「Key」を登録して「OK」

以上、設定する項目が多いので、ぼ忘れしたり間違いを起こすこともあるのでメモ的に残して置けば安心。尚、メーラーソフトにBecky!ver2を使用、受信プロトコルとして「POP3」を選択、送受信は快適で問題なし。

WordPressのインストール準備で最新の「Apache、PHP、MriaDB」インストールと設定

Windows

Apache PHP MriaDB(MySQL)

Apacheの設定

1.httpd.confを修正
ServerAdmin postmaster@xxxxxx.com
ServerName xxxxxx.com:80
2.httpd-ssl.confを修正
<VirtualHost _default_:443>
#   General setup for the virtual host
DocumentRoot "C:/xampp/htdocs/xxxxxxx"
ServerName xxxxxx.com
ServerAlias www.xxxxxx.com
ServerAdmin admin@xxxxxxt.com
ErrorLog "C:/xampp/apache/logs/error.log"
TransferLog "C:/xampp/apache/logs/access.log"

PHPの設定

1.Dynamic Extensions ;
extension=gd
2.[mbstring]
mbstring.internal_encoding = UTF-8
mbstring.http_input = pass
mbstring.http_output = pass
mbstring.encoding_translation = Off
mbstring.detect_order = UTF-8,SJIS,EUC-JP,JIS,ASCII
mbstring.substitute_character = none
mbstring.strict_detection = Off
3.[Date]
date.timezone = Asia/Tokyo
#最終行近くの[Date]も修正
;date.timezone=Europe/Berlin→Asia/Tokyo

MariaDB(MySQL)の設定を確認

Xampp ControlPanel右側から三番目のコマンドプロンプトオープン
1.[mysqladmin -u root password]←入力
2.root アカウントに設定するパスワードを入力して Enter。
3.確認のためにもう一度同じパスワードを入力し Enter キー。

確認のために「mysql -u root -p
MariaDB への接続を終了する場合は 「quit」。

my.ini(MySQL)ファイルを開く

/* Authentication type and info */
$cfg['Servers'][$i]['auth_type'] = 'cookie';←修正
$cfg['Servers'][$i]['user'] = 'root';
$cfg['Servers'][$i]['password'] = 'xxxxxxxxxx';←入力
$cfg['Servers'][$i]['extension'] = 'mysqli';
$cfg['Servers'][$i]['AllowNoPassword'] = true;
$cfg['Lang'] = '';

以上が整った段階でWordpressのインストールの準備、WordPressのインストール後、ただちにサイトのSSL化にLts’Encryptを取得する。

TOP

Copyrighted Image