整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
是 Typora Markdown 編輯器的類似 Vue 文檔風(fēng)格的自定義主題。
Typora是一款支持實(shí)時(shí)預(yù)覽的 Markdown 編輯器和閱讀器，支持Windows、macOS、Linux三大平臺(tái)。Typora 作為一款合格的 Markdown 編輯器，支持圖片、列表、表格、代碼、公式、目錄等功能，同時(shí)這款軟件還支持（一鍵）動(dòng)態(tài)預(yù)覽功能，讓一切都變得如此干凈、純粹。并且有多種主題模板。typora-vue-theme就是參考了Vue文檔風(fēng)格而開發(fā)的一個(gè) Typora 自定義主題。
Vue 白天模式
感謝: 本主題中的vue-dark.css來自typora-vue-dark-theme.
鏈接見下。該模版非常漂亮！必須贊一個(gè)
wordpress主題的動(dòng)態(tài)模板中，搜索頁模板并不是必須的。但是，為了對(duì)用戶更加的友好，可以讓用戶在wordpress網(wǎng)站上能夠通過搜索來查找自己的想要的文章內(nèi)容，我們還是有必要給trans主題添加一個(gè)搜索頁模板。一般情況下，wordpress主題動(dòng)態(tài)模板的搜索頁的整體布局和文章列表頁模板是差不多的，所以，我們可以參照文章列表頁來做。
在wordpress主題trans目錄下創(chuàng)建一個(gè)search.php文件，這是wordpress程序要求的默認(rèn)搜索頁模板的文件，名字必須是search。然后，把trans靜態(tài)模板search.html文件中的代碼全部復(fù)制到search.php文件中。
在search.php文件中，刪除從< !doctype>到< /header>標(biāo)簽之間的所有代碼。然后，在同樣的位置，通過wordpress函數(shù)來引入公共的頭部模板文件：
< ?php get_header(); //引入頭部模板 ?>
修改頭部模板header.php文件中的搜索表單的代碼，代碼如下：
< form action="< ?php bloginfo("siteurl"); ?>" method="get">
< input type="search" name="s" placeholder="搜索...">
< input type="submit" value="搜索">
</form>
注：第一個(gè)input輸入框的name值必須是 s （如上圖），這也是wordpress的硬性要求。否則，就搜索不到任何內(nèi)容。
在search.php文件中，刪除< div class="c_right">標(biāo)簽所包含的所有側(cè)邊欄代碼，然后，在這個(gè)位置上，引入sidebar.php側(cè)邊欄公共模板：
< ?php get_sidebar(); //引入側(cè)邊欄模板 ?>
在搜索頁模板中，刪除從< footer>標(biāo)簽到模板代碼結(jié)束的所有底部代碼，然后，在當(dāng)前的位置上，添加如下代碼引入底部公共模板：
< ?php get_footer(); //引入底部模板 ?>
因?yàn)槭撬阉黜撁婺０澹裕@個(gè)面包屑導(dǎo)航，我們要體現(xiàn)出搜索結(jié)果。所以，我們刪除search.php模板中< div class="left_top">標(biāo)簽內(nèi)部的所有代碼，替換成如下的代碼：
< ul>< li>< span class="dashicons-before dashicons-admin-generic"></span>搜索</li>< li>< a href="<?php bloginfo("siteurl"); ?>">< span class="dashicons-before dashicons-admin-home"></span>首頁</a> > 搜索結(jié)果</li></ul>< ul> 關(guān)鍵詞“< ?php the_search_query(); ?>”共有 < ?php global $wp_query; echo $wp_query->found_posts; ?> 個(gè)搜索結(jié)果</ul>
上面代碼解說：
the_search_query()：輸出要搜索的關(guān)鍵詞；$wp_query：是wordpress提供的一個(gè)全局變量，它包含當(dāng)前頁面的所有查詢數(shù)據(jù)；$wp_query->found_posts：搜索當(dāng)前關(guān)鍵詞的數(shù)量
搜索頁面包屑導(dǎo)航效果如下圖：
刪除search.php搜索頁模板中< div class="left_bottom">標(biāo)簽內(nèi)部的所有代碼，然后，替換成如下代碼：
< ?php if ( have_posts() ): while ( have_posts() ) : the_post();?>< div class="list">< ul class="list_h">< a href="< ?php the_permalink(); ?>">< ?php the_title(); ?></a></ul>< ul class="list_con">< ul class="list_con_left">< a href="< ?php the_permalink(); ?>"> < ?php if(has_post_thumbnail()) { //如果有特色圖片，就調(diào)用特色圖片the_post_thumbnail( 'thumbnail' ,array( 'alt'=> trim(strip_tags( $post->post_title )), 'title'=> trim(strip_tags( $post->post_title )))); }else { //否則調(diào)用文章第一張圖片echo '<img src="'.catch_first_image().'" alt="'.$post->post_title.'" width="150" height="150" />';}?></a></ul>< ul class="list_con_right">< li>< ?php echo mb_substr(strip_tags($post->post_content),0,120,'utf-8'); ?> ... </li>< li>< span class="dashicons-before dashicons-admin-users">< ?php the_author(); ?> </span>< span class="dashicons-before dashicons-calendar-alt">< ?php the_time("Y年m月d日"); ?> </span>< span class="dashicons-before dashicons-visibility">< ?php echo get_post_meta($post->ID, 'views', true); ?> </span></li></ul></ul></div>
< ?php endwhile;endif;?>
這段代碼，我們?cè)赼rchive.php文章列表頁模板中我們已經(jīng)介紹過了，就不多說了。
在trans靜態(tài)模板的代碼中，我們沒有分布代碼，這里，我們添加上搜索結(jié)果的分頁效果代碼：
< div class="left_page">< ?phpthe_posts_pagination( array('mid_size'=> 3, //當(dāng)前頁碼數(shù)的 兩邊 顯示幾個(gè)頁碼。'prev_text'=>'<', //上一頁'next_text'=>'>', //下一南) );?></div>
這里，我們使用到了wordpress提供的分頁函數(shù)the_posts_pagination()來實(shí)現(xiàn)搜索頁的文章列表的分頁效果。這個(gè)函數(shù)我們?cè)谛薷氖醉撃０鍟r(shí)，我們就介紹過了，如果想了解它，可以回到我們創(chuàng)建首頁模板index.php的文章去看看。
?好了，通過以上幾步，我們就完成了wordpress主題動(dòng)態(tài)模板trans的搜索頁面模板的創(chuàng)建和修改。此時(shí)，我們?cè)陬^部搜索框中輸入關(guān)鍵詞進(jìn)行搜索后，搜索結(jié)果如上圖所示。從這幾節(jié)課，我們可以看出，有了公共模板后，我們創(chuàng)建其它動(dòng)態(tài)模板時(shí)，就方便多了，只要按照本節(jié)的幾個(gè)步驟，就可以很輕松地創(chuàng)建出wordpress主題的動(dòng)態(tài)模板文件。如果喜歡我的文章，別忘了幫我“點(diǎn)贊、評(píng)論和關(guān)注我”哦。
習(xí) CSS 最好的方法就是去使用它，不像 XHTML 和 PHP 需要接觸模板的核心文件，同樣不要需要理解任何基本概念，只要去用它，通過使用和修正錯(cuò)誤是可以讓你快速學(xué)會(huì)。
我們現(xiàn)在已經(jīng)在 style.css 文件有些內(nèi)容，讓我們先來看看這部分內(nèi)容是干什么的？
在主題信息兩邊的 /* 和 */ 符號(hào)是為了讓主題的信息不影響該文件的其他內(nèi)容，這是 CSS 的注釋。當(dāng)輸入 CSS 代碼去樣式化你的網(wǎng)頁的時(shí)候，你可能想在這里增加些注釋使得能夠在以后更清楚知道這部分是干什么的。顯然我們并不想你的注釋影響實(shí)際的代碼，所以可以使用 /* 和 */ 這一對(duì)符號(hào)使得注釋不被解釋。
下面是處理后的主題信息
從這里開始，我們需要同時(shí)在 FireFox 和 IE 上測(cè)試主題，不同的瀏覽器對(duì)應(yīng) CSS 的代碼解釋是不同的。如果能夠在盡可能多的瀏覽器器上和盡可能多的操作系統(tǒng)上測(cè)試你的主題是最好的（Safari，Opera，Linux，Netscape 等等）。如果你和我一樣懶，那就只在 FireFox 和 IE 上來測(cè)試你的主題吧。
在 style.css 文件中輸入以下代碼：
body{
margin: 0;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
text-align: left;
vertical-align: top;
background: #ffffff;
color: #000000;
}
像 XHTML 和 PHP 一樣，通過制表符增加縮進(jìn)來的組織代碼：
保存 style.css 文件并刷新 兩個(gè)瀏覽器 Firefox 和 Internet Explorer 查看變化。
把 body{ } 看作一個(gè)標(biāo)簽，然后把它里面所有的東西看作屬性和值，和處理 XHTML 時(shí)一樣。{ 是開始符，} 是結(jié)束符。在 { 和 } 之間，冒號(hào)意思是開始而分號(hào)意思是結(jié)束。（我在涉及到 XHTML，PHP，CSS的時(shí)候都使用標(biāo)簽，屬性和值這些術(shù)語是為了保持簡(jiǎn)單，實(shí)際上 PHP 和 CSS 有不同術(shù)語。如參數(shù)（parameters），選擇器（selector）和屬性（property）。）
在我們繼續(xù)走之前，我需要解釋下為什么使用 body{ } （CSS 選擇器），是因?yàn)槟闶窃跇邮交W(wǎng)頁的絕大基本部分（或者說是總體部分），<body> 標(biāo)簽。你不會(huì)樣式 <head> 因?yàn)檫@個(gè)標(biāo)簽沒有東西需要樣式化。你網(wǎng)頁上展示的絕大部分的東西是在<body> 和 </body> 標(biāo)簽之間。
然后，在后面你會(huì)樣式化 ID 為 header 的 DIV 標(biāo)簽。
進(jìn)一步的解釋：
margin: 0; 處理 body 標(biāo)簽的默認(rèn)的頁邊空白，如果你要頁邊空白或者更大的頁面空白，把 0 改成 10px，20px 或者其他。PX 意思是像素。每個(gè)像素是你電腦屏幕的一個(gè)點(diǎn)。當(dāng)你的頁面空白是 0 的話，就不需要在后面跟上 px。
在下面的圖片中，紅色高亮的區(qū)域就是應(yīng)用于 body 標(biāo)簽的默認(rèn)的頁邊空白。
當(dāng)給其樣式化為 margin: 0;，下面是沒有頁面空白的相同頁面：
font-family: Arial, Helvetica, Georgia, Sans-serif; 為你的網(wǎng)頁或者網(wǎng)站選擇使用哪種字體。這些字體中的第一個(gè)，Arial 是可替換的，如果你的用戶沒有在他們的電腦上安裝 Arial 這種字體，style.css 文件就會(huì)尋找 Helvetica，然后是 Georgia，再接著是 Sans-serif。你可以在字體文件夾（我的電腦 > 系統(tǒng)盤 > Windows下面）找到你的字體列表。
font-size: 12px; 顯而易見的是字體大小。可以把它改大或改小以查看變化。
text-align: left; 讓你的文本向左對(duì)齊。把它改成 text-align: right; 去查看不同之處。
vertical-align: top; 使得所有的東西從上面開始。如果是中部或底部排行你的 body 標(biāo)簽，所有東西將會(huì)向下推。
background: #ffffff; 意思是白色背景。#ffffff 是白色十六進(jìn)制代碼。#000000 是黑色十六進(jìn)制代碼。
color: #000000; 意思是文本顏色是黑色。
如果你想向前更進(jìn)一步或者自己學(xué)習(xí) CSS，最好的地方是 w3schools.com
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
