kdcsライブラリー

ロリポップより、2024年1月25日付のお知らせにて新規作成データベース（MySQL）のバージョンが8.0になるとのこと。
これより先に2023年11月16日付のお知らせにて「phpMyAdmin 5.2.1」にアップデートしたとの案内あり。

この先、新規でWordPressをセッッティングする際はPHP8系＋MySQL8.0の組み合わせになるのでローカル環境をXAMPPで作成する。

MySQLのダウンロード先はこちら
phpMyAdminのダウンロードはこちら

※phpMyAdmin5.2.1はXAMPP8.2.12に同梱されているphpMyAdmin 5.2.1を使用する

XAMPPのMariaDBをMysql8.0にする手順 (2024.1.27)
※XAMPPのバージョンは8.0.15 (64bit)
※Mysqlのバージョンは8.0.36 (64bit)

C:\XAMPP\phpMyAdminをphpMyAdmin_8.0にリネーム
XAMPP8.2.12内のphpMyAdminフォルダをコピーする

C:\XAMPP\mysqlをmysql_mariaにリネーム
ダウンロード解凍したMySQL8.0.36フォルダをコピーし、mysqlにリネーム

C:\xampp\mariadb\bin\my.ini を C:\xampp\mysql\bin\my.ini にコピーする

テキストエディタでmy.iniを開き、[mysqld]以下にあるkey_buffer=16Mをコメントアウト

その後コマンドプロンプトで以下を実行（コピペで使用可能）

cd C:\xampp\mysql
bin\mysqld --initialize-insecure
start /b bin\mysqld
bin\mysql -u root

以下mysqlコマンド

CREATE USER pma@localhost;
SOURCE C:/xampp/phpMyAdmin/sql/create_tables.sql;
GRANT SELECT, INSERT, DELETE, UPDATE, ALTER ON phpmyadmin.* TO pma@localhost;
ALTER USER root@localhost IDENTIFIED WITH mysql_native_password BY '';
ALTER USER pma@localhost IDENTIFIED WITH mysql_native_password BY '';
\q

mysqlコマンド終了

bin\mysqladmin -u root shutdown

以上でコマンドプロンプト終了

phpMyadminのパスワード
phpMyAdmin\config.inc.php

/* Authentication type and info */
$cfg[‘Servers’][$i][‘auth_type’] = ‘config’;
$cfg[‘Servers’][$i][‘user’] = ‘root’;
$cfg[‘Servers’][$i][‘password’] = ”;
$cfg[‘Servers’][$i][‘extension’] = ‘mysqli’;
$cfg[‘Servers’][$i][‘AllowNoPassword’] = true;
$cfg[‘Lang’] = ”;

auth_type の値を config から cookie に変更

ログインするとエラーが出る
「設定ファイルの中に記述されているパスフレーズ（blowfish_secret）が短すぎます。」

phpMyAdmin\config.inc.php
$cfg[‘blowfish_secret’] = ‘xampp’;

xamppのところ32文字以上入れる

デフォルトではphpMyAdminのrootにパスワードが設定されていないのでログイン時
ユーザー名のrootだけで（パスワード未入力）ログインできる

なので、rootにパスワードを設定する
ログインしたら「ユーザーアカウント」→「rootの権限を編集」→「change password」で
パスワードを入力、再入力欄にも入力し、保存をクリックする。

XAMPPを起動させる

jQueryを使わないタイプ
※1行目が「.scroll(function ()」だとページをリロードしたときに要素が表示されないので「.on(‘load scroll’, function ()」とすることでスクロールとリロード両方で動作するようになる。
※適用したい要素のclassに「fadeUp」を記述。スクロールでclassに「on」が付加される。

$(window).on('load scroll', function (){
	$('.fadeiUp').each(function(){
		var elemPos = $(this).offset().top,
		scroll = $(window).scrollTop(),
		windowHeight = $(window).height();

			if (scroll > elemPos - windowHeight + 150){
				$(this).addClass('on');
			}
	});
});

css
※通常は.fadeUpと.fadeUp.onの2つ。要素3つを順番にフェードアップさせる場合(2)(3)を追加する。

.fadeUp {
  transition: 0.8s ease-out;
  transform: translateY(80px);
  opacity: 0;
}
.fadeUp.on {
  transform: translateY(0);
  opacity: 1.0;
}
.fadeUp.on:nth-of-type(2) {
    transition-delay:200ms;
    -webkit-transition-delay:200ms;
}
.fadeUp.on:nth-of-type(3) {
    transition-delay:400ms;
    -webkit-transition-delay:400ms;
}

以下の記述で簡単に行える

動作させたい要素にクラスを付加する

<div class="fadeUp">
<!-- フワっとフェードインさせたい要素 -->
</div>

javascript

$(window).scroll(function () {
  var scrollAnimationElm = document.querySelectorAll('.fadeUp');
  var scrollAnimationFunc = function () {
    for (var i = 0; i < scrollAnimationElm.length; i++) {
      var triggerMargin = 100;
      if (window.innerHeight > scrollAnimationElm[i].getBoundingClientRect().top + triggerMargin) {
        scrollAnimationElm[i].classList.add('on');
      }
    }
  }
  window.addEventListener('load', scrollAnimationFunc);
  window.addEventListener('scroll', scrollAnimationFunc);
});

css

/*----------------------------
fadeUp ｜下から上へ出現
----------------------------*/
.fadeUp {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.fadeUp.on {
  transform: translateY(0);
  opacity: 1.0;
}

/*----------------------------
fadeLeft ｜左から出現
----------------------------*/
.fadeLeft {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.fadeLeft.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

/*----------------------------
fadeRight ｜右から出現
----------------------------*/
.fadeRight {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.fadeRight.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

Instagramの投稿画像をWordPress記事内に「埋め込みコード」を利用して貼り付けることができるが、このコードにはjavascriptも含まれる。WordPressでは管理者または編集者以外は記事にjavascriptを貼り付けることができない仕様になっているため、ユーザー権限が「投稿者」の場合、記事内のjavascriptは削除されてしまう。

権限をカスタマイズすることによってこの問題は解決できるが、セキュリティーリスクが高くなってしまう。

そこでInstagramの埋め込みコードにあるjavascriptをfooterに記述して使えるようにしておく。
記事ページ以外は関係ないので条件分岐でsingleだけにしておく。

<?php if ( is_single() ) : ?>
<script async src="//www.instagram.com/embed.js"></script>
<?php endif; ?>

特定のカスタム投稿記事に適用する場合
※例：イベントページ（スラッグ = event）

<?php if ( is_singular('event')): ?>
<script async src="//www.instagram.com/embed.js"></script>
<?php endif; ?>

複数のカスタム投稿記事に適用する場合

<?php if ( is_singular( array('event','xxxx')): ?>

WordPressのデフォルトでは管理者と編集者以外、記事内にjavascriptを使うことができない。
※入力しても強制削除される

権限のカスタマイズでjavascriptが入力できるようにする
※投稿者のユーザー情報が漏れるとセキュリティーリスクが伴う

functions.phpに記述

function add_theme_caps(){
    $role = get_role( 'author' );
    $role->add_cap( 'unfiltered_html' );
}
add_action( 'admin_init', 'add_theme_caps' );

get_roleで指定できる権限グループは以下になります。

管理者 : administrator
編集者 : editor
投稿者 : author
寄稿者 : contributor
購読者 : subscriber