月: 2021年11月

Fatal error: Cannot redeclareの解決

自作のInstagramのフィード表示をショートコードで導入後、プレビュー画面から「編集」画面に進むと、「Fatal error:」が表示されて全く編集できなくなりました。重大なエラーって表示されて、めちゃくちゃ恐ろしい・・・。

とにかく、公開してしまっているメインのページだったので、編集できなくて困るということで、一旦無理やりデータベース上から怪しい記載を削除しました。レンタルサーバー上の、管理ツール(phpMyAdmin)から直接データを編集しました。投稿記事のID（post=●●● の数字）はエラーになっている記事ページのURLから確認できます。

問題箇所を特定する

デフォルトでは「重大なエラーがありました」としか表示されないので、WordPressのデバックモードをONにします。wp-configのdefine( ‘WP_DEBUG’, fales );という記載があるので、trueに変更するだけです。

参考：「サイトに重大なエラーがありました」の回避方法

表示されているエラー（Cannot redeclare 自作の関数名と表示されていた）からすると、ショートコードで呼び出したphp（showfeed.php）の中の自作関数が、重複して定義されているとのこと。一回しか定義してないのになんでや・・・と悩みまくりましたが、なんらかの加減で、showfeed.phpのコードが複数回呼び出されている様子。

参考：【PHP】Fatal error: Cannot redeclare f() エラーの原因と対処（複数）

対策する

今回、ショートコードで呼び出したphp（showfeed.php）から、さらにincludeで別のphp（get-json.php）を呼び出す構成にしていたため、includeをinclude_onceにして、１度しか読まないように変更。include_onceするphpファイルの中身には、関数のみの記載に変更しました。変数の定義と関数の実行は、showfeed.phpに移動しました。

なんとか通常通り表示できるようになりました！修正後、デバックモードをOFFにするのを忘れないようにしましょう。

…で長文を省略するCSS

Instagramのフィードを表示するコードに使いたくて調べる。全ての投稿内容を記載するわけにいかないので、「…」で省略するしたいのだけど、JS使うと複雑だったり負荷がかかったりすると嫌なのでCSSで簡単に対応したい。

参考：IE11やEdgeにも対応できる、CSSだけで3行目でテキストの文末を「…」で省略する

モダンなWebブラウザならline-clamp、IE11はwrap-flowを使う。

See the Pen InstagramFeedList by yuming (@yuuuming) on CodePen. 

.InstagramFeed ul li span.caption {/*基本設定。設定した高さより長くなった場合に文末以降が省略される*/
  line-height: 1.4;
  max-height: 2.8em;
  overflow: hidden;
}
.InstagramFeed ul li span::before, .InstagramFeed ul li span::after {/*IE用。疑似要素に除外設定*/
  content: '...';
  line-height: 1;
  position: absolute;
  right: 0;
  top: 2em;
  -ms-wrap-flow: start;
}
.InstagramFeed ul li span::after {
  background: currentColor;
  color: white;
  top: auto;
}
@supports (-webkit-line-clamp: 2) {/*モダンブラウザ用*/
  .InstagramFeed ul li span {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
  }
  .InstagramFeed ul li span::before, .InstagramFeed ul li span::after {
    content: normal;
  }
}

自作テンプレ作成時のデバッグメモ

WordPressの自作テンプレ作成時に、デバッグ方法を調べるのに手間取ったので、方法をまとめます。

ページ上に直表示

一番手っ取り早い方法。最後の「;」を忘れてエラーになりがちなのと、タグ閉じ忘れなどhtml構文ミスって表示おかしくなりがちなので気を付ける。

※「’」と「”」の違いはほぼないと思っているけど、たまにエラーになるので、またきちんと調べたい。

参考：https://www.php.net/manual/ja/function.var-dump.php

echo '<div>ページ上に直接表示される</div>';

変数をタグで囲って出力したいときなどは、echoを行で分けるのもわかりづらいので「.」（ピリオド）で文字列を連結して表示すると短く済んでわかりやすい。

$data = '連結する変数';
echo '<div>' . $data . '</div>'
$data = ['配列とか','Datetime型とかも','詳しく表示'];
var_dump($data);

コンソールでの出力

javaScriptのconsole_log()を使う方法。直接ページのレイアウトに影響を受けたくない場合に便利。

参考：https://www.php.net/manual/ja/debugger.php

//////コンソール出力//////
$myvar = '出力内容';
console_log( $myvar ); 

function console_log( $data ){
  echo '<script>';
  echo 'console.log('. json_encode( $data ) .')';
  echo '</script>';
}

アラート表示

実行されたタイミングでモーダルが表示される。わかりやすいけど、ちょっと鬱陶しい。下のコードの例は、wp_head アクションが実行されるタイミングでアラートが表示される。

//////アラート表示//////
add_action( 'wp_head', 'hook_javascript' );

function hook_javascript() {
	$output = "<script> alert('Page is loading...'); </script>";
	echo $output;
}

ログファイルとして出力

ファイルにログとして出力内容を残す場合の例。アクセストークンを使ったjsonファイルの取得のデバッグで、処理履歴的に内容を残したくて作った。エラーがあった場合の出力もこんな感じでいけそう。ただし、ファイルの書き込み処理は動作負荷が少し増えるので注意。

putlog("出力されるログ内容" . "\n");

function putlog($logdata){// 実行時刻と引数のデータを指定ファイルに追記する
	$putfile = dirname(__FILE__). '/_log.txt';//実行しているphpファイルのディレクトリにファイル保存場所を指定
	$current_datetime = new DateTime();
	$puttext = "\n".'//log: '.$current_datetime->format('Y-m-d H:i:s') .'//'."\n".$logdata;

	file_put_contents( $putfile, $puttext, FILE_APPEND);//内容を追記する（ファイルがなければ作成される）
}

日時の操作について調べる

現在から1ヶ月後の日付を表示するコードを記載してみる。

参考：日付間隔関数（DateInterval）を使って簡単且つ、正確に日付の足し算、引き算をする　https://notepad-blog.com/content/154/

参考：DateTime クラスのまとめメモ　https://qiita.com/re-24/items/c3ed814f2e1ee0f8e811

$interval = new DateInterval('P1M');//1ヶ月
$currentDate = new DateTime();//現在時刻

echo '<p>現在から1ヶ月後: ' .$currentDate->add($interval)->format('U = Y-m-d H:i:s') . "\n".'</p>';

DateTimeクラスについて、簡単に日付の足し算、引き算、比較的なことができて便利なんだけど初心者にはなかなかわかりづらくて、普通にechoで出力できないし、var_dumpで出力すると訳分からん配列が表示される。人がわかるように出力するときは、formatを絶対使う必要あり。

※「->」で処理を複数連続してできるのも便利だなぁ。（あんまりよくわかってないので、また詳しく調べたいと思う。）

固定期間の加算、減算であればmodifyの方がわかりやすいかも。違いはまた調べたい。

参考：https://php.programmer-reference.com/php-datetime-modify/

$currentDate = new DateTime();//現在時刻

echo '<p>現在の1ヶ月前: ' .$currentDate->modify('-1 month')->format('U = Y-m-d H:i:s') . "\n".'</p>';