Begin主题正文功能演示

摘要

正文具有二级、三级标题突出显示,四级标题作为文章目录索引,文章摘要、可选择4种文章形式,图片lightbox查看,视频lightbox播放,文章中插入图片幻灯,文字折叠开关,下载按钮、回复可见内容等功能。

Begin主题,CSS3+HTML5、扁平化、响应式设计、自定义颜色风格,不依赖任何前端框架。

正文具有二级、三级标题突出显示,四级标题作为文章目录索引,文章摘要、可选择4种文章形式,图片lightbox查看,视频lightbox播放,文章中插入图片幻灯,文字折叠开关,代码高亮、下载按钮、回复可见内容等功能。

文章形式

  • 主题支持标准、日志、图像、引用(软件)四种形式。编辑文章时:
  • 有缩略图的文章可以选择标准形式
  • 无缩略图的选择日志形式
  • 文字少图片多的日志可选择图像形式
  • 不同的文章形式,在文章列表页面,会显示不同的外观布局

文章编辑

主题集成了常用自定义栏目添加面板,自定义缩略图、文章描述、幻灯中的图片、设置为侧边推荐文章等都可以在此添加。

WP自带相册

WordPress自带相册样式演示

文章索引目录

自动将文章中的四级标题<h4>(选中章节文字,点击编辑器“段落”,选择“四级标题即可”)转化为文章索引目录,需要到主题选项中开启该功能。效果如本文。

当页面滚动到第3个四级标题时才会在屏幕左侧边缘显示目录索引,滚动到第2个四级标题时自动隐藏。

文章摘要

编辑文章时可以在编辑器下面的“摘要”面板中输入一段摘要内容,用于显示在正文顶部,并同时显示在文章列表中,有利于SEO,摘要控制在180字符以内,多出的部分会被截断。

默认回行段首自动空两格

按住上档键(shift)的同时,按回车键(Enter),则无空格。

图片lightbox查看

编辑文章插入图片时:

  1. 从URL插入(外链)必须选择链接到:图像URL;
  2. 本地上传,必须选择链接到:媒体文件
  3. 图片名称不能为中文汉字,否则不会启用图片lightbox查看。

点击图片查看图片lightbox效果

Begin主题正文功能演示

图片超链接lightbox查看图片

另外,利用这个图片lightbox查看功能,可以只添加图片的链接而不用将图片添加到文章中,就可实现lightbox查看,可提高页面加载速度,又不影响图片浏览。

比如:图片1图片2图片3

这三张图片只添加了超链接,并没有添加到文章中,也不影响正常lightbox查看。

文章中插入图片幻灯

回复可见

只有在本文留言后才能看见隐藏的内容

此处为隐藏的内容!
发表评论并刷新,才能查看

只有留言评论者才能看见隐藏的内容

密码保护

通过添加短代码为文章部分文字加密,只有输入正确密码才能查看,测试密码:zmingcx

输入密码查看加密内容:

通过添加短代码为文章部分文字加密,只有输入正确密码才能查看,测试密码:zmingcx

视频lightbox播放

正常插入视频地址:

http://v.youku.com/v_show/id_XMjM2OTE3ODg4.html

 

文字折叠隐藏及代码高亮

通过添加短代码隐藏部分文字内容

查看隐藏的内容展开

  1. #tag_cloud-2 {
  2. position:relative;
  3. height:340px;
  4. margin: 10px auto 0;
  5. }
  6. #tag_cloud-2 a {
  7. position:absolute;
  8. color: #fff;
  9. text-align: center;
  10. text-overflow: ellipsis;
  11. whitewhite-space: nowrap;
  12. top:0px;
  13. left:0px;
  14. padding: 3px 5px;
  15. border: none;
  16. }
  17. #tag_cloud-2 a:hover {
  18. background: #d02f53;
  19. display: block;
  20. }
  21. #tag_cloud-2 a:nth-child(n) {
  22. background: #666;
  23. border-radius: 3px;
  24. display: inline-block;
  25. line-height: 18px;
  26. margin: 0 10px 15px 0;
  27. }
  28. #tag_cloud-2 a:nth-child(2n) {
  29. background: #d1a601;
  30. }
  31. #tag_cloud-2 a:nth-child(3n) {
  32. background: #286c4a;
  33. }
  34. #tag_cloud-2 a:nth-child(5n) {
  35. background: #518ab2;
  36. }
  37. #tag_cloud-2 a:nth-child(4n) {
  38. background: #c91d13;
  39. }

下载按钮

主题集成短代码实现的下载按钮功能,编辑文章时,切换到文本编辑模式,点击编辑工具栏 的下载按钮或者下载链接(可自定义按钮名称),并在文章设置面板中输入下载弹窗中下载按钮名称及下载地址,添加一个下载按钮。

还可以在自定义栏目面板中输 入button2、button3、button4,并分别在值中输入按钮名称,同时再添加url2、url3、url4,在值中输入下载链接,添加总共 4个弹窗中的下载按钮。

无弹窗的链接按钮

文件下载

博客主机
weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:67   其中:访客  65   博主  2

    • avatar sq 0

      • avatar 号都没喝过 1

        好东西

        • avatar 勇PAN高峰 0

          好东西

          • avatar sam 0

            矮油、、非常感谢楼主的分享!支持…

            • avatar 小铃铛 0

              看看,学学

              • avatar 白河岸边 0

                很漂亮的主题

                • avatar alex1111 0

                  棒棒的

                  • avatar honeypotato 0

                    非常喜欢这个主题

                    • avatar 伊凡 1

                      不错,试试看

                      • avatar Leo 0

                        要看

                        • avatar mengkun 0

                          代码高亮功能有个很严重的BUG,比如说高亮这个php代码……
                          if(empty($GET_[‘a’])):
                          评论

                          • avatar 东方大厦 0

                            此次v

                            • avatar 明月登楼的博客 4

                              不错,赞一个先!