【wordpress】wordpress自己製作主題看這一篇就夠了/常用函數/注意事項

wordpress自己製作主題看這一篇就夠了/常用函數/注意事項

一.介紹

想必想要大家都要自己製作主題了，也是對wordpress有點了解了，在這裏我就不多廢話了。
有不瞭解的歡迎大家看我wordpress的文章
第一期安裝以及大致使用
第二期wordpress常用插件（最全）

二.主題製作大致過程以及常見問題及解決方法

1. 在wp-content\themes下創建主題文件夾

2. 在剛纔創建的文件夾下新建以下三個文件index.php,style.css,screenshot.png
   
   在此過程中可能遇到的問題：
   （1）, 自己的主頁文件是html格式的
   報錯：

   模板丟失。獨立主題需要有index.php模板文件，子主題必須在
   style.css樣式表中包含模板頭部。
   

   解決方法：你主題頁面的文件格式必須是php格式的（也就是後綴名必須 是php）
   （2）.在跟主頁頁面同級的文件夾內沒有style.css,或者說樣式文件名不爲style.css
   報錯：

   缺少樣式表。
   

   解決方法：你需要把你的樣式文件移動到和主頁頁面文件在同一級的文件夾內。或者樣式文件名字改爲style.css

   （3）.沒有screenshot.png文件
   當然這個文件對於你自己用你自己開發的主題的時候來說是可有可無的，但是如果是給別人用就一定要加上，它表示你主題的大概樣子，可以讓客戶一眼就可以看出什麼樣子。
   差別：
   

3. 點擊啓用主題
   啓用主題後可能遇到的問題:
   （1），自己原來頁面裏面本來有的圖片，js，css和使用到的插件都在控制檯中報錯（404），如圖所示：
   
   這個時候就要用到php中一些常用的函數了

<?php get_header(); ?> ：	調用Header模板
<?php get_footer(); ?> ：	調用Footer模板
<?php bloginfo('html_type'); ?> ：	網頁Html類型
<?php bloginfo('charset'); ?> ：	網頁編碼
<?php bloginfo('name'); ?> ：	博客名稱（Title）
<?php bloginfo('url'); ?> ：	博客 Url
<?php bloginfo('description'); ?> ：	博客描述
<?php bloginfo('stylesheet_url'); ?>:	CSS文件路徑
<?php bloginfo('template_url'); ?> ：	模板文件路徑

如圖所示：插入到原有路徑前面，不用刪除或修改原有路徑，這樣就可以解決這個問題了

4.wordpress導航菜單（不那麼重要可以跳過）

導航菜單是每一個WordPress主題必須的元素，如果你要製作一個WordPress主題，那就必須熟悉WordPress導航菜單註冊函數 register_nav_menus() 和導航菜單調用函數 wp_nav_menu() ，這兩個參數一般都是配合使用的。

在主題的 functions.php 中添加：
register_nav_menus(array(
‘header_menu’ => ‘頂部菜單’,
‘footer_menu’ => ‘頁腳菜單’,
));
上面的代碼註冊了兩個代碼，其中 ‘header_menu’ 和 ‘footer_menu’ 分別是這兩個菜單的“鍵key”，而後面的 ‘頂部菜單’ 和 ‘頁腳菜單’ 是對這個菜單的描述，會在 外觀 - 菜單 中顯示出來。下文將會圖例說明。
按照上面的結構，就可以註冊多個菜單。
在儀表盤中修改菜單

導航菜單調用函數 wp_nav_menu() 介紹
自定義導航菜單調用函數，可用來調用 register_nav_menus() 註冊的菜單。

<?php
$data = array(
	'container'       => 'div',		//父元素
	'container_class' => 'header_menu_wrap',		//父元素class
	'container_id'    => '',		//父元素id
	'menu_class'      => 'header_menu',	//導航ul節點class
	'menu_id'         => ''		//導航ul節點id
);
wp_nav_menu( $data);
?>

輸出的HTML結構如下：
自定義導航菜單調用函數，可用來調用 register_nav_menus() 註冊的菜單。

<div id="menu_left" class="header_menu_wrap">
  <ul class="header_menu">
    <li><a href="https://www.test.com">首頁</a></li>
    <li><a href="https://www.test.com/news">WP資訊</a></li>
    …………
  </ul>
</div>

接下來我們就可以根據這個 id 來寫css美化菜單的顯示效果了。

---

//製作不易，客官臨走不得點個贊👍，好讓更多人看到！