css – 卡拉科技

2015年6月10日2015年6月11日

使用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，新建目录，选择自定义的模板；

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

2014年4月4日

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。明白以上基本知识后，下面我们要做一件大事，且听我慢慢道来。

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

首先我们要获取这个自定义菜单的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="http://www.xxx.com/wp-content/themes/xxxtheme/menuV2.js" type="text/javascript"></script>

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

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