如何修改 Jetpack Mobile Theme 的 Logo 及頁腳

有些Wordpress佈景主題本身沒有提供 Mobile Device 的版型，而是直接使用 Jetpack 的 mobile theme。

Jetpack 的 mobile theme 是以輕量化設計，所以預設不顯示 Logo 圖片(可以顯示網站主副標)

透過 Chrome Extension mobile browser emulator，可以看到網頁原始碼中，body 標籤的 class 帶著 mobile-theme 的屬性

但 Jetpack Plugin 的免費版本是不提供客製化的介面，所以必須手動去修改 Jetpack Plugin Source Code

Jetpack 手機版的版型程式碼存放路徑 /wp-content/plugins/jetpack/modules/minileven/theme/pub/minileven/

要在網頁上方增加 Logo ，就找 header.php

要修改頁腳，就找 footer.php

在 header.php Source Code 大約第21行左右，應該會看到 <div id=”wrapper”>，這就是行動裝置版面的開頭

我的做法是在此標籤下插入

<div id=”logo” style=”width:100%;background-color:white;”> <img src=”xxxxxxxxxxx” alt=”logo” title=”my logo”> </div>

這樣 Logo 圖就會出現在行動版網頁的 Menu & Search Bar 上方

之所以要在 img 標籤外，再增加 div 標籤，是因為外層 div 底色是醜醜的灰色，而 Logo 圖不見得跟畫面寬一樣，就會露出醜醜的灰底。很不協調。

當然你也可以把 div 的樣式設定放到自定 css 樣式檔中，不一定要寫在 Jetpack header.php 程式檔中。

至於頁腳的部份，如果不修改，預設就是出現

View Full Site Proudly powered by Wordpress

字樣，簡中版本的訊息更是鳥…

查看全部站點 由Wordpress強力驅動

所以只好不客氣的把它都 Remark 掉。

大約在 footer.php 第 35行左右，會看到

<a href="<?php echo $current_url . '?ak_action=reject_mobile'; ?>"><?php _e( 'View Full Site', 'jetpack' ); ?></a><br />

的訊息。

要把這行 Remark 很簡單，只要在這行上面增加

<?php /*

在下一行增加

*/ ?>

這樣整行程式碼及 HTML Code 就會都變成註解，也不會出現在 HTML Code 中

但這行程式碼只是去除 View Full Site 文字

在 footer.php 大約第 58 行，會看到

<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'jetpack' ) ); ?>" target="_blank" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'jetpack' ); ?>" rel="generator"><?php printf( __( 'Proudly powered by %s', 'jetpack' ), 'WordPress' ); ?></a>

按照上面的方法，把程式碼 remark 掉就把它清乾淨了！

Reference