装飾のためにサイトを巡って得た素晴らしいサンプル

WordPressのバージョンが6.0にアップすると言うこともあり暫くの間フロントページや投稿記事の見直しをしていた。バージョンアップで問題が発生するかなとか、今後のTwentySeventeenの更新で何か不都合が生じるかと思ったけど両方とも心配することも無く今のところ快適な感じだ。

【サイトの装飾】

ボタン式コメント欄
コメント欄を開閉するスタイリッシュなボタンの設置                    

コメント欄が開閉式ボタンでマウスオーバーにてボタンが回転して「クリック」することでコメント欄が表示・非表示と切り替わるユニークなボタン。設定は子テーマの「comments.php」にボタンのコードを張り付けるだけで非常に簡単。
ボタンのCSSはコードをコピーし「style.css」に貼り付けてボタンの大きさや色など、各自の好みに変更可能で当サイトでは変更なく張り付けた。

スイッチ式検索フォーム
スイッチ式検索フォームをCSSで作る!               

このスイッチ式検索フォームは前々から利用させてもらおうとCSSコードをコビーして保存してた。何が素晴らしいかと言うとWordPressの検索フォームを虫眼鏡アイコンで開閉するように見せてること、サイドバーとフッターに貼り付けた。

バウンドアニメーション
文字や要素が弾むバウンドアニメーションのCSSサンプル集          

画像とか文字をバウンドする感じのアニメーションのサンプルをサイトで探していたところ見つけたボールをバウンドさせるアニメーションをカスタマイズした。画像は円形のPNG、ボールにも影を付けて立体的雰囲気を出したかったけど。。。まぁいいっか!

フロントページや投稿記事に装飾で変化を持たせるページ作りの楽しみが倍増かな?!だね。

ページ内の特定場所の移動や別ページの特定場所へ移動するLINKの貼り方

多くの記事が日記帳的でメモ帳的な記事なので投稿した後、以前にも似た記事を投稿していたことに気が付いて記事内容を修正や訂正することがある。そこで、以前書いた記事が参考になる場合に、その文字列(箇所)を「#Link」できれば結構充実したサイトになりそう。

ページ内や別ページで移動する「LINK」の貼り方

ページ内の特定場所への移動

ページ内リンクの貼り方
 1.リンク先としたい見出しブロックを選択し、「高度な設定」をクリック。
 2.「HTML アンカー」の入力欄に任意の文字列(目印)を入力。←例:「link」            
見出し以外のブロックに目印(HTMLアンカー)
 1. リンクを設定したい文字列を選択
 2.リンクを設定したい文字列を選択して「」ボタンをクリック
 3.#HTMLアンカーで指定した文字列:「#link」を入力し、[送信]ボタンをクリック

別ページの特定場所への移動

リンクを設定したい文字列の入力バーの「」ボタンからリンクするページを指定
 1.#Link先の文字列を指定(リンクする文字列をマーク)
 *見出しをLINKするページの場合は、「高度な設定」のHTML アンカーに入力。
 2.前もってLink先のアドレスとpost-idまでをコピー
(例:(https://www.osshinet.com/server/2022/01/26/321 #link)のように「#Link」をリンク先に張り付け、リンクする文字列の確認してから「リンク追加」をクリック。
リンク先の見出し又は段落の入力バーから「HTMLとして編集」にして#Linkする文字列の前に(<a id=”link”></a>)を張り付ける。

クラッシックエディターを使用していた時は「TEXT」で張り付けていたが、ブロックエディターでは、ブロックの「HTMLアンカー」や入力バーの「」ボタンから張り付ける事ができる。今のところは簡単な投稿記事で済ませてるので利用するチャンスが無いけど忘れないように方法をメモることにした。

WordPressのPHPファイルの文字化けを簡単に回避する方法

以前に「妻と僕」さんのボタン式コメント欄を試していたが、comment.phpで文字化けで暫く放置していた。たまたまfunction.php内のコードに日本語で注意書きを入れたところ同じく文字化けなのでサイトを巡って調査した。
多くの文字化け回避の情報でファイルを修正したが一向に回避できないでいたが。。。最後の手段でテキストエディタの「秀丸」のエンコードの種類を「Unicode (UTF-8」で指定して名前を付けて保存してみたところ、なんと文字化けが回避できた。早速、comment.phpでもエンコードを変えて保存したところ同じく回避、何なんだという感じ!!!

PHPファイルの文字化け回避

「秀丸」で文字化け回避

幾つか該当するPHPファイルもテキストエディタ「秀丸」で、エンコードを指定して保存したが、全て文字化けを回避できた。

1.秀丸で文字化けしたPHPファイルを開く
2.ファイル(F)からエンコードの種類(D)で文字コードの一覧を表示
3.ファイルの種類が(.php)でも「日本語(Shift-JIS)」が選択されてるので、一覧から「Unicode(UTF-8)」を選択
4.エンコードの切り替えダイアログが出たら、「内容を維持したまま適用(K)」を選択して保存

 

 

最後に、各ファイルを「FTPでUP」すれば文字化けは解消されている。Windows環境では「php.ini」で設定されていても文字化けすることがたまにあるらしいので、文字化け回避のために「秀丸エディタ」で解消できる。このエディターを購入した当時は、高い買い物と思っていたが「秀丸」を購入して正解だった。

投稿記事の文字や画像にCSSのみで影や動き、アニメーション等で装飾

以前から簡単な方法でフロントページ、投稿記事に装飾して楽しんでいたが、最近クラッシックエディターからブロックエディターに移行したので新たな気持ちで「CSSのみで装飾」に挑戦してみた。

CSSのみで装飾

【CSSのみで装飾する準備】

タイトル、見出し、文書内の文字に影で協調

 1.フロントページをオープンするとサイト・タイトルがフェードイン。

.site-branding-text {
    animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;}
@keyframes fadeIn {
      0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
      0% {opacity: 0}
    100% {opacity: 1}
}

 2.投稿記事の見出し、協調する文字に影(text-shadow)を追加する。

o{text-shadow: 1px 2px 3px #808080;}
*(a),(p)等のアルファベットは避けること

文書枠のサンプルを得る。

 1.文書枠に関しては、サンプルを紹介してるサイトから好みの枠を選んでカスタマイズした。 「さるわか」さんのホームページ 感謝!

ピックアップ例:12. 分厚いボード風
    <div class="box12">
        <p>ここに文章</p>
</div>
.box12{
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #5989cf; ←#f0f8ff;に変更
    background: #c6e4ff; ←none;に変更
    border-bottom: solid 6px #aac5de;
    border-radius: 5px;
}
.box12 p {
    margin: 0; 
    padding: 0;
}

 2.ピックアップしたサンプルがマウスオーバー時に浮き上がる。

.float{ position:relative;
    top:0;
    padding:10px 20px;
    display: inline-block;
    border: 1px solid #ccc;
    color: #333;
    text-decoration: none;
    outline: none;
    transition: all .5s;}  /*アニメーションの設定*/
.float:hover {    /*hoverをしたらボックスに影がつき浮き上がる*/
    top:-4px;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4);}

装飾した文字や画像にアニメーションで協調

取り合えず最低でも各種プロパティーがどのような動作するのかだけでも知る必要がありそのサンプルなどをサイトから得る。
参考にした多くは 「WEB MANABU」さんの「応用69.要素の移動、回転、変形(transform)」からカスタマイズした。感謝!

 1.サムネイル画像を影を付けて回転させる。

<HTML>
    <div class="clip-path-shadow rotate-x"> /*--x軸(縦)回転--*/
    <div class="rotate-y div"> /*--画像の情報と動作--*/
    </div></div>
   *動きが無い場合は影と回転を<div>で囲む
<CSS>
/*--X軸(縦)回転--*/
.rotation-x1,
.rotation-x2{
    width: 150px;
    height: 150px;
}
.rotation-x2{
    transform-style: preserve-3d;
    perspective: 150px;
}
.rotation-x1 div,
.rotation-x2 div{
    transition: transform 2s;
    width: 150px;
    height: 150px;
    line-height: 150px;
    background-color: #ddd;
    text-align: center;
}
.rotation-x1 div:hover,
.rotation-x2 div:hover{
    transform: rotateX(2turn);
}

 2.ボーダーラインをアニメーションさせる。

<span class="border"> /*中央から外へ広がる線--*/ </span>
.border{
	position: relative;
	text-align: center;
	font-size: 12px;
}
.border:before{
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	border-bottom: solid 2px #00b900;
	transform: translateX(-50%);
	animation: border_anim 3s linear forwards;
}
@keyframes border_anim {
	0%{width: 0%;}
      100%{width: 100%;}
}

 3.マウスオーバー時に文字を拡大させる。

<span class="kakudai">拡大する文字</span>
.kakudai{
    display  : inline-block;
    animation: kakudaiAnime 4s alternate infinite; /* アニメーション指定 */
    animation-play-state: paused;
}
.kakudai:hover {        
    animation-play-state: running;
    }
@keyframes kakudaiAnime{
   0% { transform: scale(1, 1);   }    /* 大きさ */
  50% { transform: scale(2, 1.5); }    /* 大きさ */
}

多くのサンプルがネットに溢れてるのでそのまま利用できるものがあるけど、少し手を入れることで好みの影とか動き(アニメーション)に変える事ができる。

いろんな形状の画像(clip-path)に影を付ける方法

クラッシックエディターでの「box-shadow」 ではブロックエディターでは不可?、画像に影(shadow)がつかない。いろいろ調べてみると、単純にclip-pathの要素に対してbox-shadowを指定すれば良いと思っていたが、clip-pathの場合は影の部分がカットされることが分かった。

【clip-pathに影(shadow)をつける方法】

試した投稿記事の影付き画像は、clip-pathをwrapする要素で作成して、「filter」を使用することで影が付くので下記の要領でコードをStyle.CSSに追加した。

/*---片方の影付き---*/
.clip-path-shadow {
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5)); /*画像の影*/
}
/*---全体の影付き---*/
.clip-path-shadow2 {
  filter: drop-shadow(1px 1px 8px rgba(0,0,0,1));  /* 画像の影 */
}
*影の色は「rgba」必須
【片方に影】
【全体に影】

Clip-pathで色々な形状を作って影を付ける事ができること又、クラシックエディターでも「clip-path画像」にfilterを使用して影を付けることができることで楽しみが倍増!!

多角形の切り抜き画像に動きを加えた投稿記事を書く楽しみ方

先ずは「clip-path」の指定について、polygon(多角形) の頂点の座標を操作することが分かっていても、矩形、円形、星形などさまざまな形で画像の切り抜くことが難しい。そこでサイトを巡って見つけることできた CMAN 感謝! で自サイトにて使いたい多角形をコピーして整形したコードで「Style CSS」へ貼り付けた。

clippathで多角性の画像】

又、 CSS clip-path Maker 感謝! と言うサイトがあって「clip-pathでbasic-shapeの値」の使い方の画像サイズから「inset」「circle」「ellipse」「polygon」に対して、どの形状で指定するかによって値の書き方が少し違ってくることや、画像の大きさから見た形状をチェックできる。

整形したコードは同じパターンで統一して追加CSS又は、Style.CSSに追加した。

/*--- 双方向 (150x150)---*/ ←画像サイズ(任意、メディアで統一)
.clip-d {  ←アルファベット順に
  clip-path : polygon(40px 0px ,0px 75px ,40px 150px ,40px 110px ,115px 110px ,115px 150px ,150px 75px ,115px 0px ,115px 40px ,40px 40px );}
.clip-d:hover {transform: rotate(10deg);} ←動き

形状等のサンプル(星形、楕円形、卵形、菱形、双方向形、円形)又、スタイル的なことも考えて画像に動きを「マウスが触れる(:hover{}」入れながら試していくことにした。

今のところ「clip-path」の複雑系、例えば葉っぱ形とか複雑系などもあるけど、投稿記事に張り付けるまでに至っていない。

WordPressのファイル保護やセキュリティ対策

サイト(Wordpress)公開初期、頻繁にApacheのログに現れたWordPressのxmlrpc.phpにアクセスを試みるIPが多くてビックリ!情報サイトで確認して分かったことは「セキュリティ対策としてxmlrpcファイルを外部アクセスから保護及びブルートフォースアタックの対策が必要」と言うことで下記のように施した。

WordPressのファイル保護とブルートフォース対策

【xmlrpc.phpの保護】

1.WordPressの.htaccessに下記を追加
 RewriteRule ^xmlrpc.php$ “http\:\/\/0.0.0.0\/” [R=301,L]←現在不可
2.子テーマのfunctions.phpに下記を追加
 add_filter(‘xmlrpc_enabled’, ‘__return_false’);

xmlrpcファイルの保護必要なコード(1)がバージョンアップで「.htaccess」に追加してもすぐ削除されているのでfunctions.phpに(2)のコードを追加した。

【ブルートフォースアタックの対策】

「PeerBlockとApacheのhtaccessで保護」することでOK!と思っていたが、WordPressのプラグイン「Limit-Login-Attempts」で確認すると海外からのログインが何百とロックされている。なので、WordPressのブルートフォースアタック対策に「wp-config.php」の先頭部分に「admin系のユーザーのみ有効」だけど下記のコードを追加した。

if ( isset($_POST['log']) && preg_match('/^admin/i', $_POST['log']) ) {
 header("HTTP/1.1 403 Forbidden"); die();}

上記の追加で効果があったかどうか分からない部分があるけど、少なくともxmlrpc.phpのアクセスは完全にブロックして、「Limit-Login-Attempts」で確認のブルートフォースアタックも百程度に減少してる。

ブロックエディターの「ボタン」をカスタマイズ

フロントページから「投稿リストへのリンクの記述」は枠線で我慢してたが、ブロックエディターのボタンに切り替えてみようと試みた。その前にサイトで調べて分かったことが幾つかあってその部分を理解した上で追加CSSに加えてカスタマイズした。

フロントページへのボタンのカスタマイズ

【ボタンのカスタマイズ】

前もってボタン用のスタイル(メニュー)の項目でデザイン(フォント、ボーダー色、リンク先、等)を作成してから「.wp-block-button .wp-block-button__link、.wp-block-button .wp-block-button__link:hover」をStyle.CSSに追加すると独自のボタンらしきものを作成することができる。

「.wp-block-botton .wp-block-botton_link」の部分は、前もって作ったデザインを除く、ボタンのトランジション(動き)等を指定する。
「.wp-block-button_link:hover」の部分は好みのボタン動作を指定する。

.wp-block-button .wp-block-button__link {
    background-repeat: no-repeat;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}
.wp-block-button .wp-block-button__link:hover {
    background-position: 70% 30%;
    padding: 10px 40px 10px 15px;  	
    color: none;
  	opacity:0.8;
}

見よう見まねの部分があるけど、「TwentySeventeen」には視覚的に修正できる「ダッシュボード→外観→カスタマイズ」で、好きなスタイルに近い ボタンになるように修正してフロントページへ加えることができた。

WordPressで発生する面倒なトラブルや問題をサイトを巡って得る方法

WordPressの場合多くのトラブルと言うか問題は、細かい部分で「何とかならないか?」と言った作業中に起きることが多い。以前はその都度サイトを巡って解決方法を見つけたりしていたが。。。

―Wordpressのお役立ち情報サイトー

そんな中見つけたサイト テクメモさん、ここまで「インストール方法から便利なプラグインの紹介まで、Wordpressのお役立ち情報を配信」を紹介するサイトがあったとはビックリ!だった。

  WordPress全般に関する記事
  テーマカスタマイズに関する記事
  プラグインに関する記事

以前は単にメモってテーマ「TwentySeventeen」に合った情報をピックアップしたり、その都度チェックしてカスタマイズしてたけど、新たに立ち上げたサイトでは多くを参考にさせていただいている。感謝!

以前から幾つか参考にさせていただいた中で、「.htaccessに追加するだけでWordPressを高速化することができる魔法のコード」というもの「WordPressの.htaccessファイルにコピペで追加するだけのコード」が残念なことにいつの間にか利用不可になったようだ。理由は分からないけどWordPressさん!罪深いね!!

「WP-Optimize」は、WordPressのデータベースの最適化と不要なデータの削除ができるプラグイン

WordPressのデータベースは、最適化を行わずに運用し続けていると、データベースの中に余分なデータが増えて膨大な容量になり、ブログが重くなる原因になることがある。

WP-Optimize

【WP-Optimizeの主な機能】

WordPress高速化にも役立つ「WP-Optimize」の使い方や設定方法は簡単、最適化スケジュールを予め設定しておくことで、次のような不要データを自動で削除してくれる。

  記事の古いリビジョン
  自動保存された下書き
  ゴミ箱に残っている記事            
  スパムコメント
  期限切れのキャッシュ

一度設定しておけば、WordPressのデータベースを継続的に最適化・クリーンアップの処理が実行される。

当サイトでは記事を公開するまでに、下書き保存とかプレビューが頻繁なのでリビジョンの数が膨大になったり、キャシュの削除が必要となるので、最適化スケジュールでなくその都度、不要データを削除してる。

TOP

Copyrighted Image