用户工具

站点工具


wordpressadvanced:notes

WordPress 建站笔记

以下记录一些 WordPress 在建站时使用不同的主题可能会需要的问题记录汇总,仅作个人笔记记录,如果刚好你也使用相同主题建站,或许会有所帮助。

Enfold 主题自定义内容类型

使用 Toolset 创建一个名为 products 的 Post Types。复制 single.php 到子主题下,文件名改为 single-products.php。找到 single-products.php 第 41 行:

get_template_part( 'includes/loop', 'index' );

修改为:

get_template_part( 'includes/loop', 'page' );

视需要可以删除:

//show related posts based on tags if there are any
get_template_part( 'includes/related-posts');

//wordpress function that loads the comments template "comments.php"
comments_template();

WP Favorite Posts 插件使用

使用 Toolset 创建新的内容类型(products)后,需要修改插件文件 wpfp-page-template.php,找到:

// $qry[‘post_type’] = array(‘post’,’page’);

将//去除,并将其它修改为:

$qry[‘post_type’] = array(‘post’,’page’, ‘products’);

添加CSS: Box shadow

box-shadow: 2px 2px 22px -3px #a3a3a3;
-moz-box-shadow: 2px 2px 22px -3px #a3a3a3;
-webkit-box-shadow: 2px 2px 22px -3px #a3a3a3;

移除自定义内容类型的前缀和分类前缀

前提:使用 Toolset 插件可以很方便的创建自定义内容类型,但是发布的分类和内容 URL 并不整洁,需要借助 Custom PermalinksWP htaccess Control 这两个插件来完成。

以下为 TOOLSET 操作:

  1. 自定义内容类型命名为 Products , 其 slug 为 products ;
  2. 为 Products 创建分类命名为 Products-cats , 其 slug 为 products-cat ;

以下为内容创建操作:

  1. 进入 Products > Products-cats 创建分类 Solar Water Heaters(slug为solar-water-heaters),并为其创建一个子分类 Solar Collectors(slug为solar-collectors);
  2. 进入 Products > Add New,发布一篇新内容,比如:Heat Pipe Collectors(slug为heat-pipe-collectors);

这样我们得到的分类和内容链接分别是:

https://www.yourdomain.com/products-cat/solar-water-heaters/solar-collectors/
https://www.yourdomain.com/products/heat-pipe-collectors/

products-cat 和 products 前缀显得多余和无意义,通过以下操作,可以修改它们。

进入 Settings > htaccess Control > Remove Taxonomies and Author Base , 勾选 Remove Products-cats Base 项,可以将分类 URL 中的 products-cat 移除;

安装 Custom Permalinks 插件安装后,并没有设置项,需要手动给每篇内容更改 URL ,进入 Products > All items,编辑 Heat Pipe Collectors,在标题下方修改 Permalink 即可。譬如我们可以改为(将分类名称分别加上):

https://www.yourdomain.com/solar-water-heaters/solar-collectors/heat-pipe-collectors/

U Design主题放置社交图标

放置社交图片是个很普通的操作,但是如果主题后台部分本应放电话号码或邮箱的地方,只能够放置一段字符,而我们想放置很多内容时。

这里我们配合 短代码+自定义CSS 来实现:

短代码写在FUNCTIONS.PHP文件内:

/*social icons on header*/
function tony_social_func() {
    $tony_html .= "<ul id='tony-social'>";
    $tony_html .= "<li class='ts1'><a href='#1'></a></li>";
    $tony_html .= "<li class='ts2'><a href='#1'></a></li>";
    $tony_html .= "<li class='ts3'><a href='#1'></a></li>";
    $tony_html .= "<li class='ts4'><a href='#1'></a></li>";
    $tony_html .= "</ul>";

    return $tony_html;
}
add_shortcode( 'tony_social', 'tony_social_func' );

上传图片到媒体库,然后自定义 CSS:

ul#tony-social {padding: 0;margin-top: 35px;list-style: none;right: 0;position: absolute;}
#tony-social li {float:left;width:48px;height:48px;background-color:#fff;border-radius: 24px;padding:0; margin:0 8px 0 0;}
#tony-social li a {display: block;height: 48px;}
.ts1{background:url(https://www.babelindustries.com/wp-content/uploads/2017/08/f.png) no-repeat center center;}
.ts2{background:url(https://www.babelindustries.com/wp-content/uploads/2017/08/t.png) no-repeat center center;}
.ts3{background:url(https://www.babelindustries.com/wp-content/uploads/2017/08/y.png) no-repeat center center;}
.ts4{background:url(https://www.babelindustries.com/wp-content/uploads/2017/08/g.png) no-repeat center center;}

将短代码 [tony_social] 放置在主题放置电话号码处,刷新或强制刷新前台,可以看到效果如下:

wordpressadvanced/notes.txt · 最后更改: 2021/08/06 11:37 (外部编辑)