Twenty Twelve 佈景加入 Logo 圖標

·

Twenty Twelve 是 WordPress 的一個完全響應的主題,在桌上電腦或行動設備上觀看起來都很棒,功能包括帶有自己的小部件的首頁模板、可選的顯示字體、索引和單個視圖上的帖子格式樣式,以及可選的無側邊欄頁面模板,自定義菜單、標題背景圖片。

在這麼多的官方免費佈景主題中,我一直很喜歡 Twenty Twelve 佈景,簡明的布局、大小適中的字型、自訂性高、速度快,又和外掛相容性很好;要說缺點,就是預設置無法加入 Logo 圖標。

Twenty Twelve 佈景修改系列教學:

  • Twenty Twelve 佈景加入 Logo 圖標
  • Twenty Twelve 佈景調整邊攔寬度

https://yungke.me/twenty-twelve-sidebar-width/

加入 Logo 圖標得方法:

  • 創建一個 Twenty Twelve 的兒童主題。
  • 在 Twenty Twelve 資料夾下,創建一個可以保存 Logo 圖標的資料夾,例如:我創建了一個名為 「images」的資料夾 (/wp-content/themes/twentytwelve/images)。
  • 將你準備好的 Logo 圖片,用 FTP 上傳到「images」資料夾。
  • 然後將 Twenty Twelve 父主題資料夾的 header.php 文件,複製到您的 Child Theme 資料夾中。
  • 在 header.php 文件,大約第 35 行 rel = home 後加入以下代碼。

原本的代碼

<hgroup>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>

修改成:

<hgroup>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php echo bloginfo('stylesheet_directory');?>/images/yungke-logo.png" alt="<?php bloginfo( 'name' ); ?>" width="167" height="50"/></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>
燕子飛時 Logo

Logo 圖片的大小 width=”167″ height=”50″,請修改成您自己的尺寸。

最後保存 header.php 文件。

其它的說明:

本教程的結果會保存網站的標題,但不會顯示在網站上,這樣的好處是 SEO 外掛可以抓到網站的 title 和 alt 屬性。

另一件事是 Logo 圖標下面的網站描述,默認情況下是「Just Another WordPress Site」。不建議你刪除它,因為它被置於 h2 中,這在搜索 SEO 中非常重要,它實際上告訴 google 或其他搜索引擎,您的網站的副標題是什麼。

hosted by kinsta

Comments

在〈Twenty Twelve 佈景加入 Logo 圖標〉中有 2 則留言

  1. 「宁乐熙」的個人頭像

    你好,我按照你的方法确实修改了,但是网站标题没有了,虽然不显示在页面,但是浏览器导航栏的网站标题没有了,只剩下了描述。
    你的其他说明中:本教程的結果會保存網站的標題,但不會顯示在網站上,這樣的好處是 SEO 外掛可以抓到網站的 title 和 alt 屬性。
    不成立,并没有保留网站标题?
    请问如何解决

    1. 「yungke」的個人頭像

      以為文章太久了,佈景主題有所更改,post 的方法無效了。
      今天,新開一個測試網站測試一下語法,好像沒有像你說的這樣,請你在試試,如圖:

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Hey, 想嘗試 Kinsta 主機嗎?

18748

Kinsta 高效能主機

wPowered Starter 方案

馬上訂購

18749
Your Mastodon Instance