パソコンジイジの気ままなブログ
以前のLinuxで立ち上げた自宅サーバーでは、
1．WindowsにMemcachedサーバーとクライアントのインストール
2．APCuのインストールとOPcacheの設定
＊ APCUとOPcacheの管理用コントロールパネルをインストール
Linuxではインストールや設定が簡単だったのでWindowsでも同じだと思いきや、インストール先の.ZIPが
add_filter( 'site_status_should_suggest_persistent_object_cache', '__return_false' ); ＊ヘルスセンターの表示が変わらないので、functions.phpに非表示とするためのコードを記述した。
＊解決方法の
固定ページのsidebar用のテンプレートが用意できたので、早速、カテゴリー別サイドバー用に「
WordPress
Custom Sidebars
管理画面のプラグインから「Custom Sidebars」をインストール、又は、 https://ja.wordpress.org/plugins/custom-sidebars/ プラグインのHPから。
サイドバー（ウィジェット）を自由に作成して、各記事ごとにサイドバーを置き換えることができる。
1．何個でも作成、表示条件の指定ができる。
2．投稿・固定ページの記事一覧画面から利用中の「サイドバー」を確認できる。
3．プラグインの設定データをインポート・エクスポートできる。
4．投稿・固定ページの記事編集画面からサイドバーを指定することで、サイドバー（ウィジェット）が置き換えられる。
利用する前にNETで得た情報と多少操作の違いがあって不安もあったが、想像以上に優れたプラグインで目的が明確なのでスムーズに完成及び、置き替えが出来た。尚、このプラグインのアップデートが定期的になされているようで、「
以前から新たなメニューを作成したいと考えていたがようやく案が纏まったのでサイドバー用のテンプレートを準備した。Twenty Seventeenの機能は簡単んで多くの機能を加えた関係からか
TwentySeventeen
固定ページ用テンプレート（2カラム）作成
固定ページのデザイン変更に関する方法を詳しく記事にしているので迷うことなく作成できた。感謝！
便利なデジタル生活さんのHP https://digital-life.club/hp/wordpress/twenty-seventeen-page-design-post#i
1．親テーマの「
2．次に
例：ファイル名「
<?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/」の「
<?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();
固定ページの新規作成画面に「
先日に
wordpress
固定ページの公開日非表示
.entry-date {
display: none !important;
}
Googleの検証でチェックすると、
アーカイブをオープンすると「カテゴリー」の見出しが表示されることに気が付かなかったので非表示にした。
WordPress
<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の
【サイトの装飾】
①
コメント欄を開閉するスタイリッシュなボタンの設置
コメント欄が開閉式ボタンでマウスオーバーにてボタンが回転して「クリック」することでコメント欄が表示・非表示と切り替わるユニークなボタン。設定は子テーマの
ボタンのCSSはコードをコピーし
②
スイッチ式検索フォームをCSSで作る！
このスイッチ式検索フォームは前々から利用させてもらおうとCSSコードをコビーして保存してた。何が素晴らしいかと言うとWordPressの検索フォームを虫眼鏡アイコンで開閉するように見せてること、サイドバーとフッターに貼り付けた。
③
文字や要素が弾むバウンドアニメーションのCSSサンプル集
画像とか文字をバウンドする感じのアニメーションのサンプルをサイトで探していたところ見つけたボールをバウンドさせるアニメーションをカスタマイズした。
フロントページや投稿記事に装飾で変化を持たせるページ作りの楽しみが倍増かな？！だね。
多くの記事が日記帳的でメモ帳的な記事なので投稿した後、以前にも似た記事を投稿していたことに気が付いて記事内容を修正や訂正することがある。そこで、以前書いた記事が参考になる場合に、その文字列（箇所）を「＃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」で張り付けていたが、ブロックエディターでは、
以前に「妻と僕」さんのボタン式コメント欄を試していたが、comment.phpで文字化けで暫く放置していた。たまたまfunction.php内のコードに日本語で注意書きを入れたところ同じく文字化けなのでサイトを巡って調査した。
多くの文字化け回避の情報でファイルを修正したが一向に回避できないでいたが。。。最後の手段で
PHPファイルの文字化け回避
幾つか該当するPHPファイルもテキストエディタ「秀丸」で、エンコードを指定して保存したが、全て文字化けを回避できた。
1．秀丸で文字化けしたPHPファイルを開く
2．ファイル(F)からエンコードの種類(D)で文字コードの一覧を表示
3．ファイルの種類が(.php)でも「日本語(Shift-JIS)」が選択されてるので、一覧から「Unicode（UTF-8）」を選択
4．エンコードの切り替えダイアログが出たら、「内容を維持したまま適用(K)」を選択して保存
最後に、各ファイルを
以前から簡単な方法でフロントページ、投稿記事に装飾して楽しんでいたが、最近クラッシックエディターから
.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}
}
o{text-shadow: 1px 2px 3px #808080;}
＊(a),(p)等のアルファベットは避けること
ピックアップ例：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;
}
.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);}
取り合えず最低でも各種プロパティーがどのような動作するのかだけでも知る必要がありそのサンプルなどをサイトから得る。
参考にした多くは
＜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);
}
<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%;}
}
<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); } /* 大きさ */
}
多くのサンプルが
クラッシックエディターでの「box-shadow」 ではブロックエディターでは不可？、画像に影（shadow）がつかない。いろいろ調べてみると、単純にclip-pathの要素に対してbox-shadowを指定すれば良いと思っていたが、clip-pathの場合は影の部分がカットされることが分かった。
試した投稿記事の影付き画像は、clip-pathを
/*---片方の影付き---*/
.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で色々な形状を作って影を付ける事ができること又、