WordPress6.1からキャッシュ関係に対して厳しいチェックが追加

以前のLinuxで立ち上げた自宅サーバーでは、Memcachedサーバーをインストール、APCをPHPに追加してFileやDataキャシュを管理してた。現在のWindows版自宅サーバーのWordpressは、Optimaze(プラグイン)で圧縮機能やFileキャシュのClear機能にて十分だと思っていたが、WordPress 6.1では、別にData部分のキャッシュの管理機能が必要になった。

思い出しながらの解決方法
1.WindowsにMemcachedサーバーとクライアントのインストール
2.APCuのインストールとOPcacheの設定
* APCUとOPcacheの管理用コントロールパネルをインストール

Linuxではインストールや設定が簡単だったのでWindowsでも同じだと思いきや、インストール先の.ZIPがリンク切れだったり、何とか見つけた.ZIPが違うとか、苦労の連続だった。

add_filter( 'site_status_should_suggest_persistent_object_cache', '__return_false' );
*ヘルスセンターの表示が変わらないので、functions.phpに非表示とするためのコードを記述した。

*解決方法の1~3に関しては自宅サーバーの記事として、後日纏めて投稿する予定。

カテゴリー別サイドバー用に「Custom Sidebars」プラグインを利用

固定ページのsidebar用のテンプレートが用意できたので、早速、カテゴリー別サイドバー用に「Custom Sidebars」をインストール。ワードプレスのウイジェットは「Classic Widgets」を使用してるので有効にすると新規作成画面がウィジェット内に用意されてる。目的がメニューと投稿リストへのカテゴリー別サイドバーなので、先ずはサンプルを用意して確認。

WordPress

Custom Sidebars
サイドバー置き換えプラグイン

管理画面のプラグインから「Custom Sidebars」をインストール、又は、
https://ja.wordpress.org/plugins/custom-sidebars/ プラグインのHPから。

[WordPress管理画面 ➡ 外観 ➡ ウィジェット]

サイドバー(ウィジェット)を自由に作成して、各記事ごとにサイドバーを置き換えることができる。
1.何個でも作成、表示条件の指定ができる。
2.投稿・固定ページの記事一覧画面から利用中の「サイドバー」を確認できる。
3.プラグインの設定データをインポート・エクスポートできる。
4.投稿・固定ページの記事編集画面からサイドバーを指定することで、サイドバー(ウィジェット)が置き換えられる。

 

利用する前にNETで得た情報と多少操作の違いがあって不安もあったが、想像以上に優れたプラグインで目的が明確なのでスムーズに完成及び、置き替えが出来た。尚、このプラグインのアップデートが定期的になされているようで、「wordpress6.1.1」に対応してる。

固定ページ用テンプレート(2カラム)の作成

以前から新たなメニューを作成したいと考えていたがようやく案が纏まったのでサイドバー用のテンプレートを準備した。Twenty Seventeenの機能は簡単んで多くの機能を加えた関係からかfunction.php等へ追加すると「重大なエラー」となる。そこで参考になる情報をNETで探すとあるある「Twenty Seventeenで簡単にテンプレートを追加」と言った情報をゲット!

TwentySeventeen

固定ページ用テンプレート(2カラム)作成

 

固定ページのデザイン変更に関する方法を詳しく記事にしているので迷うことなく作成できた。感謝!

便利なデジタル生活さんのHP
https://digital-life.club/hp/wordpress/twenty-seventeen-page-design-post#i

新規テンプレートから呼び出すパーツを作成

1.親テーマの「/themes/twentyseventeen/template-parts/page/」のパーツを全て子テーマに入れる。
2.次に「content-page.php」を同じフォルダに名前を変えてコピーしてファイルの中身を入れ替える。
  例:ファイル名「content-page-normal.php

<?php
/**
* Template Name: Content-Page-normal
* Template part for displaying page content in page.php
* @link https://codex.wordpress.org/Template_Hierarchy
* @package WordPress
* @subpackage Twenty_Seventeen
* @since 1.0
* @version 1.0
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php
    if ( is_sticky() ) :
        echo twentyseventeen_get_svg( array( 'icon' => 'thumb-tack' ) );
    endif;
    ?>
    <header class="entry-header">
        <?php
            echo '<div class="entry-meta">';
            echo twentyseventeen_time_link();
            echo '</div><!-- .entry-meta -->';
        ?>
        <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
  <!--- <?php twentyseventeen_edit_link( get_the_ID() ); ?> ---> ⇐削除!!! 
    </header><!-- .entry-header -->
    <?php if ( '' !== get_the_post_thumbnail() ) : ?>
        <div class="post-thumbnail">
            <a href="<?php the_permalink(); ?>">
            <?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
            </a>
        </div><!-- .post-thumbnail -->
    <?php endif; ?>
    <div class="entry-content">
        <?php
            the_content();   
            wp_link_pages( array(
                'before' => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
                'after' => '</div>',
            ) );
        ?>
    </div><!-- .entry-content -->
</article><!-- #post-## -->

新規テンプレートを作成

「/themes/twentyseventeen-child/」の「page.php」を「page-normal.php」と名前を変えてコピーする。そしてファイルの中身は下記のように記載する。

<?php
/**
* Template Name: Page-normal
* Template part for displaying page content in page.php
* @link https://codex.wordpress.org/Template_Hierarchy
* @package WordPress
* @subpackage Twenty_Seventeen
* @since 1.0
* @version 1.0
*/
add_filter('body_class','normal_body_class');
function normal_body_class($classes){
$classes[] = 'has-sidebar';
return $classes;
}
get_header(); ?>
<div class="wrap">
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
            <?php
            while ( have_posts() ) : the_post();
                get_template_part( 'template-parts/page/content', 'page-normal' );
                // If comments are open or we have at least one comment, load up the comment template.
                if ( comments_open() || get_comments_number() ) :
                    comments_template();
                endif;
            endwhile; // End of the loop.
            ?>
        </main><!-- #main -->
    </div><!-- #primary -->
<?php get_sidebar(); ?>
</div><!-- .wrap -->
<?php get_footer();

固定ページの新規作成画面に「テンプレート」という項目が表示されていればOK! 新規テンプレート(page-normal)を選ぶとサイドバーが現れる。

メニュー用固定ページに現れる公開日を非表示

先日に2コラム固定ページ(テンプレート)でメニュー用のディレクトリーページを作成したが公開日が表示されてるので削除した。

wordpress

固定ページの公開日非表示

 

「外観」➡「カスタマイズ」➡「追加CSS」に貼り付け

.entry-date {
  display: none !important;
}

Googleの検証でチェックすると、「time.entry-date.pablished」となっていたので「published-date」で試したが非表示にならない。調べたところ幾つかのバリエーションがあることが分かりそれぞれを試した。

アーカイブの見出し「カテゴリー」を非表示

アーカイブをオープンすると「カテゴリー」の見出しが表示されることに気が付かなかったので非表示にした。

WordPress

アーカイブの見出し非表示

「カテゴリ」を非表示にする手順
まずは、子テーマフォルダ「twentyseventeen-child」に「archive.php」ファイルを親テーマよりコピーして ~ 行目まで削除する。

<div class="wrap">
       --- ここから (↓) ---
    <?php if ( have_posts() ) : ?>
        <header class="page-header">
            <?php
                the_archive_title( '<h1 class="page-title">', '</h1>' );
                the_archive_description( '<div class="taxonomy-description">', '</div>' );
            ?>
        </header><!-- .page-header -->
    <?php endif; ?>
       --- ここまで (↑) ---
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

これで目障りだったアーカイブの見出し「カテゴリー」が消える。

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

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を使用して影を付けることができることで楽しみが倍増!!

TOP

Copyrighted Image