• 歡迎訪問奇跡の海網站,本站不上傳任何資源,所有資源均來自于網絡,歡迎加入奇跡の海~!奇跡の海-WordPress QQ群
  • 本站下載資源為網絡上收集整理而來,并且以計算機技術研究交流為目的,版權歸原作者所有,僅供大家參考,學習,不存在任何商業目的與商業用途.
  • 本站系統鏡像均來自于官方原版,ed2k可視為P2P下載鏈接。所有操作系統默認均為試用版,如有正版密鑰可以有效激活,本站不提供任何激活和相關服務。

如何為WordPress創建一個說說/時光軸頁面?

WP其他 奇跡の海 2年前 (2017-07-15) 704次瀏覽 已收錄 0個評論 掃描二維碼

如何為WordPress創建一個說說/時光軸頁面?

其實這個代碼之前我也有看到過,但是但是覺得沒有需要就一直沒有使用起來,現在時間長了,確實是有些話想要說說了,所以就開始啟用這個說說頁面了。那么這個頁面你可以用來作為說說的頁面,同樣的,加以設計,創建一個類似時光軸的頁面也是完全可以的,這個就看個人的技術和需求了,這里我就直接引用原博主的代碼了,代碼方面來自王柏元的博客。

第一部分代碼

首先我們需要添加第一部分代碼functions.php中去,直接添加到最后一個?>之前即可:

//新建說說功能 
add_action('init', 'my_custom_init');
function my_custom_init()
{ $labels = array( 'name' => '說說',
'singular_name' => '說說', 
'add_new' => '發表說說', 
'add_new_item' => '發表說說',
'edit_item' => '編輯說說', 
'new_item' => '新說說',
'view_item' => '查看說說',
'search_items' => '搜索說說', 
'not_found' => '暫無說說',
'not_found_in_trash' => '沒有已遺棄的說說',
'parent_item_colon' => '', 'menu_name' => '說說' );
$args = array( 'labels' => $labels,
'public' => true, 
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true, 
'exclude_from_search' =>true,
'query_var' => true, 
'rewrite' => true, 'capability_type' => 'post',
'has_archive' => false, 'hierarchical' => false, 
'menu_position' => null, 'supports' => array('editor','author','title', 'custom-fields') );
register_post_type('shuoshuo',$args); 
}

代碼添加方面沒有任何需要修改的,直接復制黏貼進去即可。

第二部分代碼

此部分代碼我們需要自行手動創建一個頁面,之后將代碼黏貼到這個頁面中去,操作步驟如下:

1.創建一個頁面,名字可以自定義,這里我創建的是shuoshuo,那么頁面名字就叫做shuoshuo.php。
2.將下面這部分代碼完整的黏貼到上面的shuoshuo.php文件中。
3.鑒于原作者的頁面模板名字是中文,使用過程中可能存在問題,這里建議將Template Name: 說說中的說說修改為你記得英文字母,如shuoshuo。
4.此部分需要解釋的就到這里了,文末還有一部分。

<?php /* Template Name: 說說 author: 王柏元 url: http://wangbaiyuan.cn */ get_header(); ?> 
<link rel="stylesheet" type="text/css" href="<?php echo THEME_URI.'/includes/css/my.css' ?>">


<div class="ssbody">


<div class="shuoshuo">


<ul class="archives-monthlisting">
<?php query_posts("post_type=shuoshuo&post_status=publish&posts_per_page=-1");if (have_posts()) : while (have_posts()) : the_post(); ?>


<li><span class="tt"><?php the_time('Y年n月j日G:H'); ?></span>


<div class="shuoshuo-content">
<?php the_content(); ?>


<div class="shuoshuo-meta"><span >—<?php the_author() ?></span></div>


</div>


<?php endwhile;endif; ?></li>


</ul>


</div>


</div>


<?php get_footer('simple');?>

因為代碼中有中文漢字,可能存在一定程度上面的亂碼,這里兩種方法,一種是替換,二中是直接刪除文字,看個人愛好了。

第三部分代碼

這部分代碼是CSS,也就是說說的樣式,這個部分代碼我個人建議直接添加到上面中去,如果你不想放在一起,那么請單獨創建一個CSS文件之后將下面的代碼復制進去并且修改第二段代碼中的引用路徑,在第8行的位置,同樣的,代碼中的圖片大家可以自行替換,這里就不提供了。那么代碼如下:

#content-container{
background: url() top left repeat,url(http://wangbaiyuan.cn/wp-content/uploads/2015/01/background.jpg) top center no-repeat;
background-attachment: fixed;
background-size: 2px 2px,cover;
}
#body-container{
background: #72d0eb;
background-attachment: fixed;
background-size: 2px 2px,cover;
}body
.ssbody{
max-width:900px;
margin:0px auto;
background-attachment:fixed;
background-repeat: repeat;
color: #FFFFFF;
font-family: 隸書;
}

.shuoshuo {
position: relative;
padding: 10px 0;
}
.shuoshuo li {
padding: 8px 0;
display: block;
}
.shuoshuo-content {
color: #FFFFFF;
font-family: 隸書;
box-shadow: 0 0 3px RGBA(0,0,0,.15);
background-color: rgba(148, 137, 137, 0.43);
border:1px #FFF solid;
border-radius: 4px;
font-size: 1.2em;
line-height:1.5em;
margin:0 150px 0 200px;
letter-spacing: 1px;
padding: 20px 20px 5px 30px;
min-height:60px;
position: relative;
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+, 文本行的任意字內斷開 */
}
.shuoshuo-content p{margin:0;}
/*作者*/
.shuoshuo-meta {
text-align: right;
letter-spacing: 0px;
margin-top:-10px;
}
/*時間*/
.shuoshuo .tt{margin: 35px 0 0 15px;float:left;}
.shuoshuo li em{float:left;background:url("http://www.wuover.com/wp-content/themes/QIUYE/images/bolangxian.png") repeat-y;width:50px;height:10px;margin:42px 0 0 28px;}
.shuoshuo li:hover .tt {color:#0c0;font-weight:bold;}
/*頭像*/
.shuoshuo .zhutou{border-radius: 50%;margin: 25px 35px 0 5px;float:right;padding: 2px;border: 1px #ddd solid;display: block;transition: .5s;width: 40px;height: 40px;overflow:hidden;}
.shuoshuo li:hover .zhutou {
transform: rotate(720deg);-webkit-transform: rotate(720deg);-moz-transform: rotate(720deg);border-color: #0c0;}
/*前面的軸*/
.shuoshuo:before {
height: 100%;
width: 2px;
background: #eee;
position: absolute;
left: 164px;
content: "";
top:0px;
}
.shuoshuo-content:before {
position: absolute;
top: 40px;
bottom: 0px;
left: -42px;
background: #fff;
height: 12px;
width: 12px;
border-radius: 6px;
content: "";
box-shadow: inset 0 0 2px #0c0;
}
.shuoshuo-content:after {
position: absolute;
top: 42px;
bottom: 0px;
left: -40px;
background: #ccc;
height: 8px;
width: 8px;
border-radius: 6px;
content: "";
}
.shuoshuo li:hover .shuoshuo-content:after {
background: #0c0;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
}
.shuoshuo li:hover .shuoshuo-content:before {-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);}
/*后面的軸*/
.shuoshuo:after {
height: 100%;
width: 2px;
background: #eee;
position: absolute;
right: 100px;
content: "";
top:0px;
}
.shuoshuo-meta:before {
position: absolute;
top: 42px;
bottom: 0px;
right: -56px;
background: #fff;
height: 12px;
width: 12px;
border-radius: 6px;
content: "";
z-index:2;
box-shadow: inset 0 0 2px #0c0;
}
.shuoshuo-meta:after {
position: absolute;
top: 44px;
bottom: 0px;
right: -54px;
background: #ccc;
height: 8px;
width: 8px;
z-index:2;
border-radius: 6px;
content: "";
}
.shuoshuo li:hover .shuoshuo-meta:after {
background: #0c0;
}
@media screen and (max-width: 800px) {
.shuoshuo-content {margin:0 60px 0 70px;padding: 10px 10px 5px 10px;}
.shuoshuo .tt{width:30px;font-weight:bold;margin: 30px 0 0 1px;height: 20px;}
.shuoshuo li:hover .tt {color:#0c0;font-size:1.2em;}
.shuoshuo:before {left: 50px;}
.shuoshuo-content:before {left: -26px;top:30px;}
.shuoshuo-content:after {left: -24px;top:32px;}

.shuoshuo:after {right: 27px;}
.shuoshuo-meta:before {right: -39px;top:33px;}
.shuoshuo-meta:after {right: -37px;top:35px;}

.shuoshuo .zhutou{margin: 17px 5px 0 5px;}
.shuoshuo li em{float:left;width:39px;height:10px;margin:34px 0 0 -1px;}
}

那么如果你想要將兩段代碼弄在一起的話,那么請用下面的代碼替換第二段代碼中的第8行代碼即可:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%23content-container%7B%0Abackground%3A%20url()%20top%20left%20repeat%2Curl(http%3A%2F%2Fwangbaiyuan.cn%2Fwp-content%2Fuploads%2F2015%2F01%2Fbackground.jpg)%20top%20center%20no-repeat%3B%0Abackground-attachment%3A%20fixed%3B%0Abackground-size%3A%202px%202px%2Ccover%3B%0A%7D%0A%23body-container%7B%0Abackground%3A%20%2372d0eb%3B%0Abackground-attachment%3A%20fixed%3B%0Abackground-size%3A%202px%202px%2Ccover%3B%0A%7Dbody%0A.ssbody%7B%0Amax-width%3A900px%3B%0Amargin%3A0px%20auto%3B%0Abackground-attachment%3Afixed%3B%0Abackground-repeat%3A%20repeat%3B%0Acolor%3A%20%23FFFFFF%3B%0Afont-family%3A%20%E9%9A%B6%E4%B9%A6%3B%0A%7D%0A%20%0A.shuoshuo%20%7B%0Aposition%3A%20relative%3B%0Apadding%3A%2010px%200%3B%0A%7D%0A.shuoshuo%20li%20%7B%0Apadding%3A%208px%200%3B%0Adisplay%3A%20block%3B%0A%7D%0A.shuoshuo-content%20%7B%0Acolor%3A%20%23FFFFFF%3B%0Afont-family%3A%20%E9%9A%B6%E4%B9%A6%3B%0Abox-shadow%3A%200%200%203px%20RGBA(0%2C0%2C0%2C.15)%3B%0Abackground-color%3A%20rgba(148%2C%20137%2C%20137%2C%200.43)%3B%0Aborder%3A1px%20%23FFF%20solid%3B%0Aborder-radius%3A%204px%3B%0Afont-size%3A%201.2em%3B%0Aline-height%3A1.5em%3B%0Amargin%3A0%20150px%200%20200px%3B%0Aletter-spacing%3A%201px%3B%0Apadding%3A%2020px%2020px%205px%2030px%3B%0Amin-height%3A60px%3B%0Aposition%3A%20relative%3B%0Awhite-space%3A%20pre%3B%20%2F*%20CSS%202.0%20*%2F%0Awhite-space%3A%20pre-wrap%3B%20%2F*%20CSS%202.1%20*%2F%0Awhite-space%3A%20pre-line%3B%20%2F*%20CSS%203.0%20*%2F%0Awhite-space%3A%20-pre-wrap%3B%20%2F*%20Opera%204-6%20*%2F%0Awhite-space%3A%20-o-pre-wrap%3B%20%2F*%20Opera%207%20*%2F%0Awhite-space%3A%20-moz-pre-wrap%3B%20%2F*%20Mozilla%20*%2F%0Awhite-space%3A%20-hp-pre-wrap%3B%20%2F*%20HP%20Printers%20*%2F%0Aword-wrap%3A%20break-word%3B%20%2F*%20IE%205%2B%2C%20%E6%96%87%E6%9C%AC%E8%A1%8C%E7%9A%84%E4%BB%BB%E6%84%8F%E5%AD%97%E5%86%85%E6%96%AD%E5%BC%80%20*%2F%0A%7D%0A.shuoshuo-content%20p%7Bmargin%3A0%3B%7D%0A%2F*%E4%BD%9C%E8%80%85*%2F%0A.shuoshuo-meta%20%7B%0Atext-align%3A%20right%3B%0Aletter-spacing%3A%200px%3B%0Amargin-top%3A-10px%3B%0A%7D%0A%2F*%E6%97%B6%E9%97%B4*%2F%0A.shuoshuo%20.tt%7Bmargin%3A%2035px%200%200%2015px%3Bfloat%3Aleft%3B%7D%0A.shuoshuo%20li%20em%7Bfloat%3Aleft%3Bbackground%3Aurl(%22http%3A%2F%2Fwww.wuover.com%2Fwp-content%2Fthemes%2FQIUYE%2Fimages%2Fbolangxian.png%22)%20repeat-y%3Bwidth%3A50px%3Bheight%3A10px%3Bmargin%3A42px%200%200%2028px%3B%7D%0A.shuoshuo%20li%3Ahover%20.tt%20%7Bcolor%3A%230c0%3Bfont-weight%3Abold%3B%7D%0A%2F*%E5%A4%B4%E5%83%8F*%2F%0A.shuoshuo%20.zhutou%7Bborder-radius%3A%2050%25%3Bmargin%3A%2025px%2035px%200%205px%3Bfloat%3Aright%3Bpadding%3A%202px%3Bborder%3A%201px%20%23ddd%20solid%3Bdisplay%3A%20block%3Btransition%3A%20.5s%3Bwidth%3A%2040px%3Bheight%3A%2040px%3Boverflow%3Ahidden%3B%7D%0A.shuoshuo%20li%3Ahover%20.zhutou%20%7B%0Atransform%3A%20rotate(720deg)%3B-webkit-transform%3A%20rotate(720deg)%3B-moz-transform%3A%20rotate(720deg)%3Bborder-color%3A%20%230c0%3B%7D%0A%2F*%E5%89%8D%E9%9D%A2%E7%9A%84%E8%BD%B4*%2F%0A.shuoshuo%3Abefore%20%7B%0Aheight%3A%20100%25%3B%0Awidth%3A%202px%3B%0Abackground%3A%20%23eee%3B%0Aposition%3A%20absolute%3B%0Aleft%3A%20164px%3B%0Acontent%3A%20%22%22%3B%0Atop%3A0px%3B%0A%7D%0A.shuoshuo-content%3Abefore%20%7B%0Aposition%3A%20absolute%3B%0Atop%3A%2040px%3B%0Abottom%3A%200px%3B%0Aleft%3A%20-42px%3B%0Abackground%3A%20%23fff%3B%0Aheight%3A%2012px%3B%0Awidth%3A%2012px%3B%0Aborder-radius%3A%206px%3B%0Acontent%3A%20%22%22%3B%0Abox-shadow%3A%20inset%200%200%202px%20%230c0%3B%0A%7D%0A.shuoshuo-content%3Aafter%20%7B%0Aposition%3A%20absolute%3B%0Atop%3A%2042px%3B%0Abottom%3A%200px%3B%0Aleft%3A%20-40px%3B%0Abackground%3A%20%23ccc%3B%0Aheight%3A%208px%3B%0Awidth%3A%208px%3B%0Aborder-radius%3A%206px%3B%0Acontent%3A%20%22%22%3B%0A%7D%0A.shuoshuo%20li%3Ahover%20.shuoshuo-content%3Aafter%20%7B%0Abackground%3A%20%230c0%3B%0A-webkit-transform%3A%20scale(1.3)%3B%0A-moz-transform%3A%20scale(1.3)%3B%0A-ms-transform%3A%20scale(1.3)%3B%0A-o-transform%3A%20scale(1.3)%3B%0A%7D%0A.shuoshuo%20li%3Ahover%20.shuoshuo-content%3Abefore%20%7B-webkit-transform%3A%20scale(1.3)%3B%0A-moz-transform%3A%20scale(1.3)%3B%0A-ms-transform%3A%20scale(1.3)%3B%0A-o-transform%3A%20scale(1.3)%3B%7D%0A%2F*%E5%90%8E%E9%9D%A2%E7%9A%84%E8%BD%B4*%2F%0A.shuoshuo%3Aafter%20%7B%0Aheight%3A%20100%25%3B%0Awidth%3A%202px%3B%0Abackground%3A%20%23eee%3B%0Aposition%3A%20absolute%3B%0Aright%3A%20100px%3B%0Acontent%3A%20%22%22%3B%0Atop%3A0px%3B%0A%7D%0A.shuoshuo-meta%3Abefore%20%7B%0Aposition%3A%20absolute%3B%0Atop%3A%2042px%3B%0Abottom%3A%200px%3B%0Aright%3A%20-56px%3B%0Abackground%3A%20%23fff%3B%0Aheight%3A%2012px%3B%0Awidth%3A%2012px%3B%0Aborder-radius%3A%206px%3B%0Acontent%3A%20%22%22%3B%0Az-index%3A2%3B%0Abox-shadow%3A%20inset%200%200%202px%20%230c0%3B%0A%7D%0A.shuoshuo-meta%3Aafter%20%7B%0Aposition%3A%20absolute%3B%0Atop%3A%2044px%3B%0Abottom%3A%200px%3B%0Aright%3A%20-54px%3B%0Abackground%3A%20%23ccc%3B%0Aheight%3A%208px%3B%0Awidth%3A%208px%3B%0Az-index%3A2%3B%0Aborder-radius%3A%206px%3B%0Acontent%3A%20%22%22%3B%0A%7D%0A.shuoshuo%20li%3Ahover%20.shuoshuo-meta%3Aafter%20%7B%0Abackground%3A%20%230c0%3B%0A%7D%0A%40media%20screen%20and%20(max-width%3A%20800px)%20%7B%0A.shuoshuo-content%20%7Bmargin%3A0%2060px%200%2070px%3Bpadding%3A%2010px%2010px%205px%2010px%3B%7D%0A.shuoshuo%20.tt%7Bwidth%3A30px%3Bfont-weight%3Abold%3Bmargin%3A%2030px%200%200%201px%3Bheight%3A%2020px%3B%7D%0A.shuoshuo%20li%3Ahover%20.tt%20%7Bcolor%3A%230c0%3Bfont-size%3A1.2em%3B%7D%0A.shuoshuo%3Abefore%20%7Bleft%3A%2050px%3B%7D%0A.shuoshuo-content%3Abefore%20%7Bleft%3A%20-26px%3Btop%3A30px%3B%7D%0A.shuoshuo-content%3Aafter%20%7Bleft%3A%20-24px%3Btop%3A32px%3B%7D%0A%20%0A.shuoshuo%3Aafter%20%7Bright%3A%2027px%3B%7D%0A.shuoshuo-meta%3Abefore%20%7Bright%3A%20-39px%3Btop%3A33px%3B%7D%0A.shuoshuo-meta%3Aafter%20%7Bright%3A%20-37px%3Btop%3A35px%3B%7D%0A%20%0A.shuoshuo%20.zhutou%7Bmargin%3A%2017px%205px%200%205px%3B%7D%0A.shuoshuo%20li%20em%7Bfloat%3Aleft%3Bwidth%3A39px%3Bheight%3A10px%3Bmargin%3A34px%200%200%20-1px%3B%7D%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />

后續步驟

那么三段代碼或者說連段代碼已經形成了,我們需要的就是讓功能展示出來了。如果代碼添加沒有問題,并且一切就緒的話,你會在后臺看到如下界面:如何為WordPress創建一個說說/時光軸頁面?

看到這界面證明你至少成功了,那么接下來我們需要進入頁面選項中新建一個頁面,頁面模板就選擇你你剛剛創建的模板名稱,如果你按照我的教程來的話,應該就是shuoshuo了。接下來就是輸入頁面名稱后發布即可。

這個時候你就可以在說說類目中創建一個說說看看效果了。


版權聲明:本站所有文章和資源使用CC BY-NC-SA 4.0協議授權發布 , 轉載應當以相同方式注明文章來自“SeaOMC.COM->如何為WordPress創建一個說說/時光軸頁面?!在下邊可以分享本文哦!
喜歡 (0)
[]
分享 (0)
奇跡の海
關于作者:
一個WordPress菜鳥!
發表我的評論
取消評論

表情 貼圖 加粗 刪除線 居中 斜體 簽到

Hi,您需要填寫昵稱和郵箱!

  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網址
中国福利彩票36选7开奖结果