第一步:尋找Bootstra4模板:
推薦網址:https://startbootstrap.com/
第二步:安裝wordpress,準備https://startbootstrap.com/
在我們開始前還有一點事情需要你去做:
在你導航至那個文件夾後,創建一個叫“wpbootstrap”的新文件夾,在文件夾裡面粘貼
在那個文件夾裡面創建一個新文件叫index.php。
現在我們將要把基本營銷網站的源碼拷貝並粘貼到index.php裡面。下面是你所要用到的源碼。我們僅鏈接了代碼的一個文本版本,因為它太長了不能嵌入在這裡。
現在我們有了一個靜態的html頁面,我們將要繼續去創建一個主css頁面。WordPress需要一個顯示在style.css頁面頂部的特殊格式的注釋,它使用這個注釋來獲得關於你這個主題的所有信息。
在你的index.php頁面所在文件夾中創建一個新文件並命名為style.css,WordPress需要一個帶有特定名稱的CSS文件style.css,所以我們不將其命名為其它任何名稱否則我們的主題將不能工作。
創建完了style.css文件,在文件頭部添加註釋:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
/* Theme Name: WP Bootstrap Description: A demo theme built to accompany the Treehouse blog post <a href="http://teamtreehouse.com/wordpress-bootstrap-theme-tutorial">How to Build a WordPress Theme with Bootstrap</a>. Author: Zac Gordon Author URI: http://teamtreehouse.com/ Version: 1.0 Tags: responsive, white, bootstrap License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) License URI: http://creativecommons.org/licenses/by-sa/3.0/ This simple theme was built using the example Bootstrap theme "Basic marketing site" found on the Bootstrap web site http://twitter.github.com/bootstrap/examples/hero.html */ |
在我們安裝和開始構建我們新主題前,我們最後需要做的是上傳一張將會在WordPress管理區顯示我們主題的圖片。這張圖片需要為300*225像素並且要命名為“screenshot.png”,你可以用下面這張圖片或做張你自己的。
你的文件夾結構現在看起來和下面的一樣:
我們現在準備進入到控制面板安裝我們的新主題。登錄到控制面板並且到外觀>主題。可應該可以看到“WP Bootstrap”做為主題中的一個被列出來。
點擊WP Bootstrap主題下面的激活設置它為網站的當前主題。
注意: 如果你正在使用一個線上的網站並且不想讓人們看到這個主題正在開發中,確保安裝並激活 Theme Test Drive plugin。
當它被激活後,訪問你的網站你可以看到像下面一樣的東西。
它很乾凈,因為在當前站點沒有一個CSS工作,所以下一步我們開始將靜態文件轉換到正在工作的WordPress主題中。
將Bootstrap文件轉換到WordPress模板
多數WordPress主題包含以下文件:
- index.php
- style.css
- header.php
- footer.php
- sidebar.php
你通常看到的要比這些文件多,但我們將要用到這些文件,從這開始並且構建,直接為header.php,footer.php,和sidebar.php創建一個空文件。
我們即將要做的是把通常要在每個頁面頂部被包含的所有html剪切並且粘貼到header.php文件中。同時我們同樣把通常顯示在每個頁面底部的所有html剪切並且粘貼到footer.php文件中。
現在讓我們看下這些文件中的每一個是什麼樣子。這些文件再次鏈接到文本文件,因為所有的源代碼太多了而不能在這列出。你可以從這些文件中拷貝代碼並且粘貼到你自己的.php文件中。
sidebar.php文件仍然是空的。
現在我們將使用我們第一個WordPress標籤來引入header和footer到index.php頁面。
我們要使用的這兩個標籤是get_header()和get_footer()。它們定義在WordPress函數中,功能是為了找到 header.php和footer.php文件並且在頁面的頭部和尾部包含它們。WordPress可以這樣做是因為我們命名我們的文件為 header.php和footer.php。如果我們命名這些文件為my-header.php和my-footer.php將不能工作。
現在我們的index.php文件變為:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<? php get_header(); ?> <!-- Main hero unit for a primary marketing message or call to action --> < div > < h1 >Hello, world!</ h1 > < p >This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</ p > < p >< a >Learn more »</ a ></ p > </ div > <!-- Example row of columns --> < div > < div > < h2 >Heading</ h2 > < p >Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </ p > < p >< a href = "#" >View details »</ a ></ p > </ div > < div > < h2 >Heading</ h2 > < p >Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </ p > < p >< a href = "#" >View details »</ a ></ p > </ div > < div > < h2 >Heading</ h2 > < p >Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</ p > < p >< a href = "#" >View details »</ a ></ p > </ div > </ div > <? php get_footer(); ?> |
你可能會想知道我們為什麼那樣做?原因是後續我們將要創建多個要引入我們header和footer代碼的頁面,如果我們只讓所有的這些頁面保留 header和footer的HTML並且想要在header 或 footer中改變些東西, 我們將不得不更新所有頁面的HTML內容。使用“嵌入” 或 “包含” 方法允許我們在一個地方就可修改header和footer代碼並且自動會在所有頁面生效,這和外鏈CSS文件而不是在每個頁面的頂部包含CSS有點類 似。
現在我們這些已經做完,我們將去修復所有CSS和javascript文件的壞鏈接。
讓我們從頭部開始。
在頭文件中找到CSS文件的鏈接並修改它們
1
2
3
4
5
6
7
8
9
|
<!-- Le styles --> <link href= "../assets/css/bootstrap.css" rel= "stylesheet" > <style type= "text/css" > body { padding-top : 60px ; padding-bottom : 40px ; } </style> <link href= "../assets/css/bootstrap-responsive.css" rel= "stylesheet" > |
變成
1
2
|
<!-- Le styles --> <link href= "<?php bloginfo('stylesheet_url');?>" rel= "stylesheet" > |
然後在你的style.css文件中,添加如下代碼:
1
2
3
4
5
6
|
@import url ( 'bootstrap/css/bootstrap.css' ); @import url ( 'bootstrap/css/bootstrap-responsive.css' ); body { padding-top : 60px ; padding-bottom : 40px ; } |
我們在此完成的部分中使用了一個特殊的WordPress標籤,不管在我們網站的哪個頁面它都能自動把bootstrap的CSS鏈到我們的主題,你會看到這個代碼bloginfo()函數將以不同的方式在本教程中使用。然後我們使用@import標籤從我們的主style.css文件中引入Bootstrap的CSS文件。現在你的網站變成這樣:
好看點了!在我們轉移到製作footer之前,我們還有不只一個標籤要添加到header中。wp_head()是一個重要的函數,它允許插件開發者向你的站點動態地添加CSS和javascript,如果我們不在模板中引入這個,一個插件將不能工作。同時我們也將要在header中去掉一些無關緊要標籤。你的header.php變成了這樣。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
< head > < meta charset = "utf-8" > < title >Bootstrap, from Twitter</ title > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > <!-- Le styles --> < link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet"> <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <? php wp_enqueue_script("jquery"); ?> <? php wp_head(); ?> </ head > < body > < div > < div > < div > < a data-toggle = "collapse" data-target = ".nav-collapse" > < span ></ span > < span ></ span > < span ></ span > </ a > < a href="<?php echo site_url(); ?>"><? php bloginfo('name'); ?></ a > < div > < ul > <? php wp_list_pages(array('title_li' => '', 'exclude' => 4)); ?> </ ul > </ div > <!--/.nav-collapse --> </ div > </ div > </ div > < div > |
現在,讓我們去清理footer。我們下載的示例文件鏈接了很多的我們網站不需要的JavaScript文件。所以,我們開始刪除它們。更新你的footer,變成這樣:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
< hr > < footer > < p >? Company 2012</ p > </ footer > </ div > <!-- /container --> <!-- Le javascript ================================================== --> < script src = "../assets/js/jquery.js" ></ script > < script src = "../assets/js/bootstrap.js" ></ script > </ body > </ html > |
接下來我們添加wp_footer()標籤,它和wp_head()擁有同樣的功能。我們閉合body標籤前把這些放好。我們也要改變我們加載JavaScript文件的方法,將它們移至header.php文件,所以更新你的footer.php變成這樣:
1
2
3
4
5
6
7
8
9
10
11
|
< hr > < footer > < p >? Company 2012</ p > </ footer > </ div > <!-- /container --> <? php wp_footer(); ?> </ body > </ html > |
現在我們可以回來通過WordPress推薦的加載JavaScript的方式添加JavaScript,這個方法包括使用wp_enqueue_script()函數。
首先,我們在wp_head()前面使用這個函數來加載jquery,接下來在你的header.php文件中放置下面代碼:
1
2
|
<? php wp_enqueue_script("jquery"); ?> <? php wp_head(); ?> |
下面我們將用wp_head()方法加載JavaScript,請記住,wp_head()方法是插件和主題中經常用來向header.php文件中添加CSS和JavaScript的。
為此我們將不得創建一個新文件叫做functions.php並且從這裡加載我們的JavaScript,這可能看起來像用很多多餘的步驟去加載一個JavaScript 文件,但由於你的主題會變得越來越複雜,這將有助於一切保持清潔和有組織。
在和header.php同樣的文件夾中創建並且打開這個functions.php文件,粘貼下面的代碼:
1
2
3
4
5
6
7
8
9
10
11
12
|
<? php function wpbootstrap_scripts_with_jquery() { // Register the script like this for a theme: wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) ); // For either a plugin or a theme, you can then enqueue the script: wp_enqueue_script( 'custom-script' ); } add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' ); ?> |
要測試是否奏效,導航至你的網站,調整其為平板電腦或手機的尺寸並且點擊下拉菜單,它應該能下拉並且像這樣:
如果下拉沒有生效,這意味着鏈接JavaScript文件過程中出現錯誤。確保你已經正確地將bootstrap > js文件夾上傳並且你的代碼是正確的。
創建WordPress首頁
現在我們已經完成了基本的靜態模板設置,讓我們通過在WordPress中創建一個首頁把它變為動態的並且顯示在我們網站中,而不是我們現在的硬編碼的HTML。
要做這個,需要到WordPres控制面板並且點擊頁面>添加新頁面。標題為“首頁”然後點擊內容編輯器上面的HTML標籤。現在我們將index.php文件中剩餘的標記語言剪切並且粘貼到這個頁面並且點擊“發布”。你的首頁應該像這樣:
所有你的index.php文件都應該包含header和footer:
1
2
|
<? php get_header(); ?> <? php get_footer(); ?> |
要想讓首頁引入我們在WordPress控制面板中添加的內容,我們需要回到動態模板中,使用很可能是WordPress中最有名的函數叫做,循環。
WordPress循環,顧名思義,它循環一個頁面或文章的標題和內容,同樣還有很多其他信息如發布日期,作者,甚至該文章或頁面關聯的評論等。
基本的循環如下所示:
1
2
3
4
|
<? php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <? php endwhile; else: ?> < p ><? php _e('Sorry, no posts matched your criteria.'); ?></ p > <? php endif; ?> |
下面是你的帶有循環的index.php文件的樣子:
1
2
3
4
5
6
|
<? php get_header(); ?> <? php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <? php endwhile; else: ?> < p ><? php _e('Sorry, no posts matched your criteria.'); ?></ p > <? php endif; ?> <? php get_footer(); ?> |
我們將要做的是在WordPress代碼中添加該頁面的標題和內容,標題的代碼為the_title()內容的代碼為the_content()。你可能注意到它們和header和footer的標籤非常相似,下面是更新後的代碼:
1
2
3
4
5
6
|
<? php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> < h1 ><? php the_title(); ?></ h1 > <? php the_content(); ?> <? php endwhile; else: ?> < p ><? php _e('Sorry, no posts matched your criteria.'); ?></ p > <? php endif; ?> |
我們在用瀏覽器測試前,必需在WordPress中更新設置,若要使首頁顯示為主頁而不是最近的博文。到控制面板設置 > 閱讀並且在“首頁顯示”下點擊“一個靜態頁”單選按鈕,接下來從“主頁”下拉菜單中選擇“首頁”。
點擊保存修改然後重新加載首頁,我們可以看到我們在控制面板中添加的首頁內容。
WordPress允許我們使用一個特殊的叫做front-page.php的文件做為網站的首頁。接下來另存index.php文件為front-page.php並且從模板中去掉get_title(),因為我們不想讓“首頁”這兩個字以h1形式在頁面頂部顯示出來。
你的front-page.php文件應該是這樣:
1
2
3
4
5
|
<? php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <? php the_content(); ?> <? php endwhile; else: ?> < p ><? php _e('Sorry, no posts matched your criteria.'); ?></ p > <? php endif; ?> |
你可以讓index.php頁面保持原樣。
要展示這一切都正常工作,讓我們嘗試在控制面板中編輯首頁內容,並且在網站的主頁查看是否發生改變。返回並且編輯首頁內容並且去掉顯示在三個h2標題下面的按鈕,修改代碼如下所示:
現在,重新訪問網站主頁,變成了這樣:
我們的首頁看起來還不錯啊,讓我們繼續添加網站的其他頁面。
添加更多內容和導航
在控制面板繼續添加一個關於,新聞,和聯繫頁面,我們現在先使用假內容,但你可以後續再回來添加你自己的內容。再繼續添加兩或三個博文。
導航
下面我們需要做的事情是替換網站中的靜態導航菜單為一個顯示剛才在控制面板中添加的頁面的導航。找到樣式名為“nav”的無序列表ul並且刪除其列表項, 同樣刪除登錄表單,因為我們將直接通過控制面板登錄網站。
在樣式為“navbar”的div內部的標記語言應該是這樣:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
< div > < div > < div > < a data-toggle = "collapse" data-target = ".nav-collapse" > < span ></ span > < span ></ span > < span ></ span > </ a > < a href = "#" >Project name</ a > < div > < ul > </ ul > </ div > <!--/.nav-collapse --> </ div > </ div > </ div > |
現在我們要用到WordPress代碼wp_list_pages()來列舉頁面,我們不去深入了解這個標籤的選項,但它做了什麼呢,它創建一個列表項並且鏈接到每一個頁面。添加下面的代碼到ul中。
1
2
3
|
< ul > <? php wp_list_pages(array('title_li' => '')); ?> </ ul > |
如果你現在去看你的網站你會看到WordPress頁面已經出現在主導航上。
這有兩個事情我們必要要修復一下。首先我們要正確排列頁面順序,第二我們要刪除示例頁面。我們將假定你可以刪除(或移至垃圾箱)示例頁面,改變頁面順序要到控制面板並點擊頁面項。
然後滑到關於頁面並且點擊快速編輯,改變順序域值為1,點擊更新,改變新聞頁面的順序為2並且聯繫我們頁面為3,首頁應該保持順序為0。
當你再訪問你的網站的時候,導航應該以正確的順序顯示。
我們現在已經完成導航工作。然而,因為WordPress導航標記和Bootstrap標記略微不同,特別是他們為當前或活動頁面使用條目的樣式上,所以不得不略微修改下bootstrap.css文件。
在你的主題文件夾下,進入bootstrap > css並且打開bootstrap.css文件,在4595行你可以看到Bootstrap.active類的一些樣式。
1
2
3
4
5
6
7
8
9
|
.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus, .navbar-inverse .nav .current_page_item a, .navbar-inverse .nav .current_page_item a:hover, .navbar-inverse .nav .current_page_item a:focus, .navbar-inverse .nav .current_page_parent a, .navbar-inverse .nav .current_page_parent a:hover, .navbar-inverse .nav .current_page_parent a:focus { |
注意: 當你製作了更多的WordPress主題後,你應該考慮使用WordPress自帶的自定義菜單功能。你可以在這和這來閱讀了解它們。
在下一章節,我們將創建頁面和文章的模板。
創建頁面,文章和文章列表模板
頁面模板
開始先將index.php文件另存為page.php,它將為我們頁面模板服務。首先我們應將“Sorry, no posts matched your criteria.”改為“Sorry, this page does not exist.”。
接下來,我們將添加一些Bootstrap標記來創建一個兩列布局。修改你的page.php模板並引入Bootstrap“row”樣式和一個“span8”和“span4” 樣式,我們將為內容使用span8,邊欄內容為span4。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<? php get_header(); ?> < div > < div > <? php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> < h1 ><? php the_title(); ?></ h1 > <? php the_content(); ?> <? php endwhile; else: ?> < p ><? php _e('Sorry, this page does not exist.'); ?></ p > <? php endif; ?> </ div > < div > </ div > </ div > <? php get_footer(); ?> |
我們將要在其他一些模板中使用側邊欄,我們要利用Wordpress的get_sidebar()標籤的優勢,它和get_header()和get_footer()標籤工作原理一樣。
我們需要創建一個叫slidebar.php的新文件並且粘入下面代碼。
1
|
< h2 >Sidebar</ h2 > |
側邊欄模板
我們一會再回來修改這些代碼,但現在應該先做是,回到page.php頁面並且在“span4”的div中添加get_sidebar()代碼,像這樣:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<? php get_header(); ?> < div > < div > <? php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> < h1 ><? php the_title(); ?></ h1 > <? php the_content(); ?> <? php endwhile; else: ?> < p ><? php _e('Sorry, this page does not exist.'); ?></ p > <? php endif; ?> </ div > < div > <? php get_sidebar(); ?> </ div > </ div > <? php get_footer(); ?> |
如果現在看一下我們的頁面你會看到我們有了標題,主要內容,還有側邊欄。
我們的頁面模板看起來相當不錯,讓我們繼續製作新聞頁面。
文章列表頁面
新聞頁面將有點困難因為它需要列出我們的文章,而不僅僅是頁面內容。有一些方法可以解決,但這裡我們要用一個非常簡單的方法處理。
另存page.php模板為home.php,在WordPress里,home.php模板是用來列出我們的文章的,在我們的示例中,我們將它為新聞頁面使用。
我們下面要做的第一件事是硬編碼一個h1標籤到顯示新聞的主要內容區域,這個標籤應該放在循環的上面。
在這個home.php模板,該循環將循環所有博客文章,所以,我們使用h2來代替h1為文章的標題,因為h1將被用於頁面的標題。
我們添加一個新標籤the_permalink(),我們可以用其作從主新聞頁面鏈接到獨立新聞文章的鏈接錨點,這個標記應該在the_title()外層,如下所示:
1
|
< h2 >< a href="<?php the_permalink(); ?>"><? php the_title(); ?></ a ></ h2 > |
在轉移到另一個前讓我們對該模板小改一下,首先讓我們改變無結果顯示文本為“Sorry, there are no posts.”,接下來,我們刪除顯示的文章內容,僅列出鏈接到頁面的標題,讓閱讀者在點擊標題後閱讀內容。
在內容處我們使用一個叫the_time()的標籤添加文章發布時間,如果你以前使用過PHP你可能認識這個標籤,這個標籤能用來美化顯示你想要定製的任何格式的日期,我們以下面格式顯示日期:
Monday, October 1st, 2012
我們用the_time()方法定製成這樣:
1
|
the_time('l, F jS, Y') |
最後我們將要在日期下面添加一個hr標籤來分開每篇文章,最後home.php模板變成這樣子:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<? php get_header(); ?> < div > < div > < h1 >News</ h1 > <? php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> < h2 >< a href="<?php the_permalink(); ?>"><? php the_title(); ?></ a ></ h2 > < p >< em ><? php the_time('l, F jS, Y'); ?></ em ></ p > < hr > <? php endwhile; else: ?> < p ><? php _e('Sorry, there are no posts.'); ?></ p > <? php endif; ?> </ div > < div > <? php get_sidebar(); ?> </ div > </ div > <? php get_footer(); ?> |
現在,為了使新聞頁面顯示得更合適,我們要到控制面板回到我們設置首頁做為主頁顯示的地方,導航至設置 > 閱讀,從緊挨着“文章頁”標籤的下拉菜單中選擇新聞頁面並且點擊“保存更改”。
一旦這個完成後你返回新聞頁面將會看到列出來的文章。
單文章頁模板
現在留給我們剩下要做的一個是顯示單獨文章的模板,該模板非常類似我們的page.php模板,所以我們將page.php另存為single.php,在WordPress中single.php用來顯示單獨的文章。
我們要做的第一個改動是在標題下面包含日期,我們使用前面同樣的代碼。
<p><em><?php the_time(‘l, F jS, Y’); ?></em></p>
我們對該模板要做的最大改變是添加文章的評論功能。然而要想讓評論工作的背後要需要很多複雜的代碼,實際上向模板添加評論功能是相當簡單的,這要感謝comments_template()標籤。
當我們在內容標籤下面添加這個標籤後我們的文章評論功能就可用了。我們同樣在評論上面添加一個hr標籤幫忙與內容分開,我們最終的single.php模板應該是這樣:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<? php get_header(); ?> < div > < div > <? php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> < h1 ><? php the_title(); ?></ h1 > < p >< em ><? php the_time('l, F jS, Y'); ?></ em ></ p > <? php the_content(); ?> < hr > <? php comments_template(); ?> <? php endwhile; else: ?> < p ><? php _e('Sorry, this page does not exist.'); ?></ p > <? php endif; ?> </ div > < div > <? php get_sidebar(); ?> </ div > </ div > <? php get_footer(); ?> |
我們現在已經完成了所有基本模板,在最後的章節,我們再去清理一些散亂的結尾,至此,我們基本完成了響應式Bootstrap WordPress主題。
完成主題
更新Header
我們需要注意的第一個細節是標題標籤,標題標籤是一個網站的重要部分,搜索引擎優化對尤為關心,理想地我們把頁面或文章的標題名稱同樣做為網站的名稱。
我們可以用wp_title()標籤完成,我們再稍微按如下方法對此標籤做下定製。
1
|
wp_title('|',1,'right'); |
這給我們想要的頁面或文章的標題,但我們同樣仍想得到網站的名稱,我們可以通過使用bloginfo()方法來得到,我們之前使用過但這次是這樣的bloginfo(‘name’),如果我們一起使用這兩個標籤代碼將為:
1
|
< title ><? php wp_title('|',1,'right'); ?> <? php bloginfo('name'); ?></ title > |
把這個添加到header.php文件的當前標題標籤處,你可以看到標題標籤如我們所願顯示在頁面的頂部。
接下來我們再把網站標題放在左上角以與我們網站名稱相配,並且使其鏈接到首頁,這是我們這樣做的原因。我們找到這個:
1
|
< a href = "#" >Project name</ a > |
並且把它轉變成:
1
|
< a href="<?php echo site_url(); ?>"><? php bloginfo('name'); ?></ a > |
你能看到我們在標題標籤中使用是bloginfo(‘name’),而site_url()標籤是新的,但見名知意,它創建了一個到網站首頁的鏈接。
現在我們已經創建了首頁鏈接,我們再從頁面列表中把“Home”鏈接去掉,我們可以通過在wp_list_pages()函數中添加一個額外的選項,這個選項是“exclude”,使用它我們不得不查找首頁的id,為此我們要導航至控制面板的頁面處並且查看該頁面的URL。
在這個示例中首頁的ID為4,它可能和你的網站不同,像這樣更新wp_list_pages()函數把4替換為你網站首頁的ID):
1
|
wp_list_pages(array('title_li' => '', 'exclude' => 4)) |
注意: 如果你在以後的主題中使用這個,你需要將這個ID更新為新主頁的ID。
組件化側邊欄
我們將要採取的最後一個重要步驟是組件化主題,這要做的是允許我們在側邊欄使用WordPress組件。
為此我們需要向我們的functions.php文件中再添加一些代碼。
打開functions.php文件添加如下代碼:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<? php function wpbootstrap_scripts_with_jquery() { // Register the script like this for a theme: wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) ); // For either a plugin or a theme, you can then enqueue the script: wp_enqueue_script( 'custom-script' ); } add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' ); if ( function_exists('register_sidebar') ) register_sidebar(array( 'before_widget' => '', 'after_widget' => '', 'before_title' => '< h3 >', 'after_title' => '</ h3 >', )); ?> |
完成後,我們再回到sidebar.php,用這方法個允許我們通過在控制面板更新側邊欄的代碼來替換掉靜態內容。
更新完sidebar.php後像這樣子:
1
2
|
<? php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?> <? php endif; ?> |
下載主題
如果你跟隨本教程有些困難,你可以在這下載已完成的主題:wpbootstrap.zip。
恭喜!
至此,我們有了一個簡單的主題,你可以開始用你的內容和樣式來定製了,你可以添加任何你定製的CSS到style.css文件。
你應該也感覺舒服,我們已經創建了這個簡單的屬於你自己的模板,如果你有興趣,可以查看你可能會在你網站中用到的所有可能的 WordPress主題標籤。
如果這是你第一個WordPress主題,那麼這是一個良好的開端,因為我們會繼續學習關於構建WordPress主題,我們將學習如何從控制面板去製作越來越多的動態的可定製的東西。
E文地址:http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial
譯文地址:http://www.woiweb.net/responsive-wordpress-bootstrap-theme-tutorial.html
譯文地址:http://www.woiweb.net/responsive-wordpress-bootstrap-theme-tutorial.html