網路上找半天也找不到解法, 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 );

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;
		}

	/**
	 * 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砍掉就一切正常了. 這問題太離奇所以寫一篇記錄一下.

之前在轉換的時候沒注意到如果文章裡有表情符號, 會造成編碼轉換失敗, 所以只要文章裡一遇到表情符號馬上就直接結束不轉換. 所以造成部分文章內容缺失.

目前blog有五千多篇文章, 不可能人工一個一個去看, 所以寫了一個Python程式去比對轉碼跟轉碼後的MySQL資料庫裡每篇文章的文字數量. 差異太多會自動Highlight出部分內容跟文章編號, 理論上應該不會太多篇, 獲得編號後再手動複製貼上即可.

因為只寫過一兩次Python, 所以邊喝酒邊看說明邊寫. 後來才終於寫出來, 大概不到30行, 但是寫超級久.

試跑了一下確實有抓到一些文章, 剩下就是一一人工把文章貼過去就完工啦~

當年2007年還在紐約時手工把那個主題製作出來, CSS, html幾乎都是手工刻出來的. 當年WP還在2.x版, CSS也只有2.0而已. 當年也是iPhone 1代手機開賣的一年. 小宗宗還在紐約的Apple Store用iPhone確認過小宗宗的blog可以相容於手機的瀏覽器.

2007-07-12當年用一代iPhone手機瀏覽小宗宗の部屋的樣子

一個轉眼13年過去了, iPhone都出了不知道多少代了, 但是小宗宗的網頁依然沒改版XD
每年都說要改結果都沒改~ 今年9月是小宗宗網站第20年, 好快! 不知不覺就寫了20年! 所以強迫自己今年一定要改版.

本來想說要從頭刻一個的, 後來發現時代進步了, WP超多人在做主題版型的, 沒必要像13年前一樣自己刻一個, 所以就找了個最接近自己想要的感覺的版型直接付費購買.

再經過自己的一些小修改跟調整後, 先在家裡的LAMP Web Server測試完成後, 直接在今天凌晨把網頁整個砍掉重新上傳新的版本.

因為之前WP新版不相容小宗宗的主題版型, 所以之前WP一直都還是用3.5.1十年前的版本在跑. 好像也沒啥問題! 這次終於一口氣跳到最新版, 整個介面差異好多, 甚麼古騰堡編輯器用得好不習慣.

今年改版主要是想改用RWD 響應式網站設計. 這樣才能對行動裝置瀏覽介面更友善. 然後把很多沒用的side bar直接砍掉, 改用隱藏式的side bar增加閱讀的顯示面積.

因為改版改很大怕大家以為走錯, 所以招牌的圖還是沿用原本的感覺, 只有稍加修改而已.
每篇文章變成一個一個不同大小的方塊搭配底圖襯托. 點進去就可以看到文章內容.

這次配色是走大和撫子的感覺, 主要是翻配色書去配出來的色調, 紫色有點重, 但應該是還蠻耐看的吧?

內文大概像這樣的感覺, 底使用的是純色似乎有點單調, 但如果加底圖的話會增加loading時間, 而且也不能太花俏影響閱讀, 可能要再想想要不要加圖.

隱藏的side bar要按上方的漢堡標誌才會在左邊出現. 然後只保留了訪客地圖, 月曆還有留言回覆, 其他都拿掉了.

其他還有很多原本的頁面還沒改完, 所以暫時先拿掉了, 等改完再來放上.

目前2020年新版網頁仍在Beta測試中

改PHP code搭配Chrome確認各html與css程式碼是否正確. 預計深夜上線.

今天吃到一個不錯的長崎蛋糕, 叫做卡斯提拉也就是日文的長崎蛋糕カステラ的發音.

底下的粗糖是長崎蛋糕的特色, 小宗宗第一次覺得長崎蛋糕好吃是在美國紐約唸書的時候在日本超市買到的長崎蛋糕, 底下的粗糖配上長崎蛋糕的香氣超搭的. 後來回台灣後就再也沒吃到相同水準的長崎蛋糕, 直到今天吃到的這家. 下次有機會要來去買買看.

最後用午餐的龍珠Pizza結束這回合XD

因為小宗宗網頁是用WordPress (WP)架設的, 在早年剛開始架設的時候使用的是WP 2.0版.
當年WP的資料庫還不支援UTF-8, 然後WP 2.2開始導入UTF-8, 但是舊的資料庫裡的資料還是Latin1.

因為不想動資料庫所以就只是把wp-config.php裡面下面這行關掉不讓WP使用UTF-8操作資料庫就可以了.
define( ‘DB_CHARSET’, ‘utf8’ );

這樣也用了十年沒問題, 但最近因為網頁20年準備大改版, 所以就打算修一下這個陳年老問題.
畢竟UTF-8是趨勢.

但是這問題搜尋的關鍵字還不好下, 找很久才發現原來是叫做所謂的double encoded utf-8
嘗試了很多方法都沒成功, 不然就是太複雜了, 看到就不想試.

很多人提到的UTF-8 Database Converter外掛新版WP也是早已不能用了.

當你把wp-config.php裡的utf8打開時, 整個網頁全部都會變成亂碼.

從後台MySQL看到的資料也是亂碼的.

MySQL DB已經是用UTF8編碼.

最後翻了很久才終於在stackoverflow找到高人指點的解法.
兩行指令解決.
https://stackoverflow.com/questions/1344692/fixing-broken-utf-8-encoding
請記得先備份你的資料庫, 然後在你的web page的Linux下用MySQL的tool先把資料庫強制轉成latin1匯出後再強制轉成utf8匯回MySQL資料庫就搞定了.


mysqldump -h localhost -u < MySQL使用者名 > -p --opt --quote-names \
--skip-set-charset --default-character-set=latin1 WP的DB資料庫名 > <自訂的匯出來的檔案名>.sql

mysql -h localhost -u < MySQL使用者名 > -p \
--default-character-set=utf8 WP的DB資料庫名 < <剛剛自訂的會出來的檔案名>.sql


如果你租用的web空間不能進入Linux命令列下指令, 那可以先用phpMyAdmin把整個資料庫匯出後再匯入到你自己架設的Linux web主機的MySQL後打上面指令轉換完成後再匯回你的網站上的MySQL資料庫就可以了.

兩行指令解決多年的問題, 讚.

最後用晚餐結束這回合~

這家牛排NT$200附餐可以選酥皮濃湯或是吐司+濃湯, 而且蠻好喝的.

然後最近Nvidia新出的30系列顯卡完全打爆20系列, 而且還比20系列便宜. 剛買2080ti的人應該覺得想哭.

先裝了一個Linux的web server 打算開始把網頁的佈景主題更新, 所以先在local端架一個臨時的測試用web server. 好久沒裝了, 遇到好多問題啊~

然後今天買了Resolume 7昇級版, 因為黑色星期五半價才不到40歐元, 還蠻划算的.

試了新版的Resolume, 好像感覺有比較順, 以前Resolume 6在換Deck的時候常常會卡一下, 這版好像沒這問題了.
試了一下午感覺相當好!

把之前滷的牛肉吃光了.

超大盤生高麗菜, 吃一半還有這麼多, 大概有鳥貴族5盤了量.
吃到後來牙都歪了XD 東西再怎麼好吃, 吃多了還是會膩的!
然後這樣的成本大概NT$20元不到吧! 超便宜!

因為今天少吃一餐, 所以補吃一個宵夜!

晚上試了一下明天實況要用的機器跟軟體, Virtual DJ好多神秘的小功能, 超妙的.

最近太貪心了,之前假日上FPGA到後來上堪輿之術,然後周二晚上七點還要飛車趕去萬隆上網頁前端設計,一整個挑戰極限XD

所幸網頁的課程今天最後一次啦~

忙碌的一天就從甜到牙齒都會軟掉的KK開始吧XD

晚上17:58老闆來問問題,結果一問就問到18:20,飛車(銀河鐵道999 XD)回家換捷運過去順路隨便買了個壽司跟無糖豆漿就打發晚餐了. 19:05滑壘趕到上課地點. 結果坐好拿出筆電才發現電源忘在車後座上XD 果然趕路就是會丟三落四的.好險螢幕調最暗靠電池勉強撐完整堂課.

今天上的是最終回,講的大多是目前常用的新技術,像是Sass/SCSS之類的,因為CSS有個問題就是有時候程式碼很冗長,而且除錯困難,有了Sass/SCSS可以用更具彈性的方式寫CSS,只是要過一個轉譯的動作,把Sass/SCSS轉譯成瀏覽器看得懂的CSS,因為要轉譯,程式會在轉譯時發現如果有語法錯誤就會被轉譯器抓出來,以前寫CSS的時候常常遇到跑出來的網頁壞掉,但是找不到是哪一行CSS寫錯. 所以改用Sass/SCSS效率會高很多, 之後改版可能會改用Sass/SCSS去寫寫看.

嗯~上這個課程其實是想要改一下目前部屋的版面,一晃眼這版型就用七年了,現在用的版型都是老技術寫的,後臺更新到新版似乎有相容性問題,所以可能要找時間調製一個新版面,不過目前最大問題就是沒時間啊XD

課程網頁 Changee LearningPath

本來以為颱風前夕會停課的,沒想到晚上照常上班上課,所以只好乖乖的背著電腦去上課啦.

今天教的大多是CSS的排版技巧,大多都是以前CSS2學過的東西,所以並不難~ 上課上到一半就收到朋友們的Line傳來說明天停班停課!賺到!

十點多下課回家路上已經有些風雨了,不過好險捷運一下就到家了,所以連雨傘都沒有用到~

明天停班停課,所以熬夜複習了一下今天上課的內容. 好多新的CSS3的特效都很有趣喔~ 希望可以用在下一版的網頁上

最近排好多課程,生活好充實!

今天晚上上的是前端工程師的課.以前叫做網頁設計師,最近幾年分工變細了.變成所謂的前端工程師與後端工程師. 前端工程師做的是偏向與使用者互動的部分,所以叫做前端. 而後端則是如前端與資料庫的溝通…等,這屬於後端的部分.

當初小宗宗是滑手機意外滑到的課程,八堂課共24小時NT$2400,等於一小時一百,還算蠻便宜的,所以就報名了. 果然大家的想法都一樣,沒多久就額滿了.

這次參加是打算學習一下新技術,現在網頁技術已經突飛猛進了.早年要做動態網頁只能用flash處理,現在什麼HTML5 CSS3之類的通通都可以做到,Flash反而越來越式微了.想當年剛學網頁的時候一定要學Flash的說.

上課的地方在有個賺一圓招牌的地方,好妙XD

人蠻多的

第一次上課感覺蠻輕鬆的,大家自我介紹一下,看老師講講最近的新技術,還有介紹一些網頁,參考書籍…等,沒多久就忽然放學,但是時間也差不多三小時喔,時間過好快啊!

藏於地下室的上課地點

今天因為太趕了,所以晚餐隨便吃吃就上課了.晚上回家Ren煮了愛心肉燥麵給小宗宗,好吃 :u_031_user: