2025-10-05 修正blog部分問題

WordPress不知道為什麼搭配小宗宗的佈景主題就會出現Flickr寬度穿出邊際的問題.
尤其是手機瀏覽問題會變得非常明顯, 只要是插入Flickr的圖片就只看得到左半邊, 右半邊要手動拖拉過去.
正常來說應該是動態調整圖片寬度以符合瀏覽器的寬度.

網路上找半天也找不到解法, AI問了也沒有答案, 只好自己來追code.

直接打開瀏覽器的開發者模式去追html原始碼再去Wordpress去比對php程式.
原本以為是在佈景主題裡面, 後來發現是在WP裡面的embed插件裡面.

在wp-includes\embed.php檔案裡的wp_embed_defaults()加入第10~13行去限制寬度. 寬度超過640的話Flickr會回傳1024寬度的檔案回來, 可能會讓網頁速度變慢.

function wp_embed_defaults( $url = '' ) {
	if ( ! empty( $GLOBALS['content_width'] ) ) {
		$width = (int) $GLOBALS['content_width'];
	}

	if ( empty( $width ) ) {
		$width = 500;
	}
	
	/* Tom force max width to 640 for flickr photo */
	if ( $width > 640 ) {
		$width = 640;
	}

	$height = min( (int) ceil( $width * 1.5 ), 1000 );

在wp-includes\class-wp-oembed.php檔案裡的data2html() 把原本27行的程式碼換成28行的樣子.

	/**
	 * Converts a data object from WP_oEmbed::fetch() and returns the HTML.
	 *
	 * @since 2.9.0
	 *
	 * @param object $data A data object result from an oEmbed provider.
	 * @param string $url  The URL to the content that is desired to be embedded.
	 * @return string|false The HTML needed to embed on success, false on failure.
	 */
	public function data2html( $data, $url ) {
		if ( ! is_object( $data ) || empty( $data->type ) ) {
			return false;
		}

		$return = false;

		switch ( $data->type ) {
			case 'photo':
				if ( empty( $data->url ) || empty( $data->width ) || empty( $data->height ) ) {
					break;
				}
				if ( ! is_string( $data->url ) || ! is_numeric( $data->width ) || ! is_numeric( $data->height ) ) {
					break;
				}

				$title  = ! empty( $data->title ) && is_string( $data->title ) ? $data->title : '';
				/* $return = '<a href="' . esc_url( $url ) . '"><img src="' . esc_url( $data->url ) . '" alt="' . esc_attr( $title ) . '" width="' . esc_attr( $data->width ) . '" height="' . esc_attr( $data->height ) . '" /></a>'; //Tom org code */
				$return = '<a href="' . esc_url( $url ) . '"><img src="' . esc_url( $data->url ) . '" alt="' . esc_attr( $title ) . '" style="width: 100%; max-width: ' . esc_attr( $data->width ) . 'px;" /></a>';
				break;

			case 'video':
			case 'rich':
				if ( ! empty( $data->html ) && is_string( $data->html ) ) {
					$return = $data->html;
				}
				break;

			case 'link':
				if ( ! empty( $data->title ) && is_string( $data->title ) ) {
					$return = '<a href="' . esc_url( $url ) . '">' . esc_html( $data->title ) . '</a>';
				}
				break;

			default:
				$return = false;
		}

原本WP的程式碼不知道為什麼會把width=寫死一個值, 所以縮放瀏覽器時因為圖片寬度是定值就不會隨瀏覽器縮放, 就會直接穿出瀏覽器外.

順便一提, 在追code的時候才發現嵌入Flickr的圖片要先發request到Flickr的server等對方回傳一個json檔後再根據裡面的資訊顯示圖片在blog文章內, 相當複雜.

另一個問題是小宗宗有用一套WP-PostViews Plus的插件用來顯示文章點擊數. 很神奇的是PHP更新到8.x的版本就會無法顯示文章點擊數. 這個問題超神祕.

一開始以為是那個插件的php程式碼不相容於8.x版的php. 打開php log確實有看到很多警告訊息, 和一個跟這個插件沒關聯的警告訊息.
後來確實修掉插件程式碼相關警告訊息, 但問題還是存在. 也請AI幫忙檢查過相容性看起來沒問題.

後來埋了很多debug messages去追code和交叉比對兩個版本的不同點. 都找不到問題.

最後在瀏覽器的開發者模式裡終於找到線索了!! 問題點出在這個plug-in會使用Ajax動態網頁去延遲更新這個點擊數的資訊, 它會讓網頁整面顯示完後再來更新所有文章的點擊率以加速網頁載入.

在開發者模式時比對Ajax的更新時會發現使用PHP 8.x時在最後回傳的值會多了一行剛剛覺得沒關聯的那個警告訊息. 所以造成Ajax判讀有問題就不更新了.

原本警告訊息是寫無法載入imagick.so的library檔案. 但奇怪的是PHP 8.x版的phpinfo()明明就有顯示ImageMagick正常運作中. 查半天根目錄的php.ini也沒找到imagick.so的定義.

最後不小心翻到以前的筆記才發現原來有一個小宗宗自己加的php.ini塞在WP裡面的wp-admin資料夾裡面.
可能PHP 8.x會去搜尋整個網頁的子資料夾然後就把那個php.ini檔load進去了. 因為那個php.ini指向的imagick.so早就被砍掉了. 所以才會出現那個警告訊息.

把那個php.ini砍掉就一切正常了. 這問題太離奇所以寫一篇記錄一下.