使用Advanced Category Template插件定义分类目录模板

使用本插件,需要一定的PHP/HTML/CSS基础,属于模板定制知识,并不适合新手。使用这个插件,可以给不同的分类(post和portfolio分类都可以)选择不同的模板,如果再配合POST相关模板插件,就可以实现POST的不同分类来展示新闻/产品。

简单点说,点击A分类展示新闻列表,B分类可以展示产品(豆腐块形式),不同的展示形式当然是涉及到模块的制作和CSS调整。下面简单说一下这个插件的使用。

1,后台搜索安装并启用本插件,进入插件设置,默认选择是勾选Post分类。

如果有Portfolio项目,那么也会有Portfolio目录供选择。

2,新建一个PHP文件,譬如名字叫:Products Category template.php,内容如下:

<?php
/*
*
* Category Template: Products Category template
*
*/
get_header();
?>

《这里添加PHP/HTML代码制作模板》

<?php get_sidebar(); ?>

<?php get_footer(); ?>

注意这里面的内容,涉及到WordPress模板文件制作,HTML排版和CSS调整等。

3,新建目录,选择自定义的模板;

分类目录 ‹ AQUA演示站 — WordPress

4,然后发布文章到此分类中,查看本分类,即可看到显示效果。

无插件(手动)添加弹出联系表单

在另一文中讲到使用Sticky Popup做侧边停靠联系表单,所谓众口难调,有人喜欢用WUFOO,也有人喜欢用内页弹出层(看起来像个窗口),那么今天就手工添加一个。

涉及到四步操作:

1,上传图片feedback-btn.png,获取其地址;

2,添加CSS代码,将刚刚获取的图片地址修改其中;

3,添加内容代码到header.php里,并完成表单代码的添加;

演示效果:下载此文件,打开index.html查看效果。

20150606105346744_easyicon_net_32图片/代码下载

JS+CSS实现竖直多级菜单

过完春节一直在瞎忙,没有顾得上更新博客。这段时间接触几个外贸网站的制作,其中涉及到一个产品边栏菜单的问题,由于都是采用WORDPRESS架构,所以在使用即有的菜单代码时,需要找到结构比较稳定,不易被破坏,而且便于迁移和重复使用的代码。这里分享一个比较好的JS+CSS竖直多级菜单,演示地址可以看:http://www.wksolar.com,完整的源码请猛击下载

多级菜单

主要文件有3个,index.html(演示HTML文件)、menuV2.css和menuV2.js。在使用这个代码前先要明确一个事情,你得了解标签的ID是怎么回事。类似如下代码:

<div id="menuV2">BLA BLA..</div>
--------------------------------------
<ul id="menuV2">
<li>AAAA</li>
<li>BBBB</li>
</ul>

ID是HTML标签的唯一标识,在本示例中,菜单的ul标签的id是menuV2。明白以上基本知识后,下面我们要做一件大事,且听我慢慢道来。

通常我们可以在侧边栏自定义菜单,这个菜单当然是可以多级的,但是通常主题并未对侧边栏的菜单作滑动或其它定义处理,所以都是直接显示,如下图所示:

2014-04-04 22-31-24

首先我们要获取这个自定义菜单的ul的id,通过右键-查看元素(chrome浏览器)可以看到(譬如说是menu-solar-products)。接下下来按以下步骤进行:

1,进入JS文件,修改2处menuV2,改为menu-solar-products;
2,进入CSS文件,查找所有menuV2,全部改为menu-solar-products;
3,将CSS,JS,图标图片共计5个文件,放在主题的menu-kala目录内;
4,将以下代码加入主题的header.php文件内,

<link href="http://www.xxx.com/wp-content/themes/xxxtheme/menuV2.css" rel="stylesheet" type="text/css" />
<script src="https://www.xxx.com/wp-content/themes/xxxtheme/menuV2.js" type="text/javascript"></script>

5,注意JS文件的第一行,true表示二级菜单与主菜单的位置平行,false表示二菜单以主菜单为原点;
6,JS文件内有一个left单词,如果将其改为right,二级菜单将从主菜单的左边展出;

这样就完成了对侧边栏多级菜单的改造了,如果有疑问欢迎评论提问。

在页面右侧放置固定二维码图片

应邀找一段JS代码,为了实现放置微信二维码在页面右侧的功能。找了好久,终没有找到,今天突然发现完全可以用CSS来控制,为何要使用JS呢?做了一个简单的测试,以下为这段含DIV+CSS代码。

gd

<div style="width: 110px; height: 147px; position: fixed; top: 450px; right: 3px; display: block;">
<a href="http://kala-ted.com" target="_blank" style="display: block; width: 100%; height: 100%; background-image: url(kalated.png); background-position: -110px 0px;"></a>
</div>