wordpress的前端怎么写

WordPress是一款开源网站建设程序，因其强大的功能和可扩展*而大受欢迎。关于WordPress扩展，主要是其插件众多，可以使用不同功能插件来扩展网站需求。WordPress所有固有的内容类型非常有限，毕竟其开始是以*客系统为基础的。对于像企业站需要的产品类型，电影站需要的**属*等，显示不便。现在推荐一款自定义内容类型/字段分类法插件--Pods可以扩展你所需要的内容类型。

pods是一款用在 WordPress上的自定义内容类型的插件，但是 pods拥有的功能却完全不限于此。pods能够扩展现有的内容类型，比如为用户资料（user）增加一个“电话”字段。此外，它还有权限管理功能，类似于“members”插件。此外，还有高级自定义内容类型，改变“标题”这个字段名称。再此外，它还有内容关系的功能。

这篇文章我们除了介绍 pods的使用方法以外，还会介绍内容类型的列表页，内容页的制作，pods字段的前台模板调用，增加内容类型到菜单等等。

扩展已有

WordPress默认有三大内容类型：文章(posts)、页面(page)、媒体(attachment)，可能“用户(user)”也算一个内容类型，因为“用户”也可以扩展。默认的分类法有：分类目录(category)、标签(tag)。默认的内容类型和分类法在项目中字段经常不够用。

扩展文章字段

1、安装好 pods后，点击“pods管理-添加”，点击“扩展已有”、选择“内容类型(文章、页面，等等)”，下方选择“文章”，点击“下一步”。

2、点击“添加字段”，比如添加一个“文章来源”的文本类型的字段，这里有几个选框。

代表的含义为：

标签：显示在发布时候的名称，可以为中文。

名称：内部使用，存在数据库里的名称，可用于模板调用，只能为字母、数字、下划线，不能以数字开头。

描述：发布时对字段的简要说明，选填。

字段类型：字段的类型，如，文本框、文本区域、文件等等。

选项：该字段是否为必填。

3、点击“添加字段”，完成添加，点击“Save Pod”保存添加。

这个时候去发布文章看看，在下方就多了个文章来源字段了。快点去用同样的方法可以为页面、媒体、用户、评论添加自定义字段吧。

创建新的

创建新的内容类型

进入到 pods的添加界面，选择“创建新的”，接下来选择“自定义内容类型”。

标签填写内容类型名称，可以为中文，比如填写个“电影”，点击下面的“高级”，在 pod name填写内容类型的机读名称，点击“下一步”，完成一个自定义内容类型的创建，你可以在左边栏找到“电影”这个内容类型。

为自定义内容类型添加字段。新创建的自定义内容类型，默认拥有“文章”这个内容类型的所有字段，比如标题、内容、日期等等，我们是在这些基础上添加新的需要的字段，比如现在添加一些字段：海报、地区、时长、年份等等。再去发布“电影”，你会发现下方多了刚刚添加的这些字段。

创建好自定义内容类型后，你会发现还有很多标签页：“管理字段”、标签、管理界面、高级选项。

标签：在后台显示的标签，根据需要修改。

管理界面：管理内容类型在后台的显示，尝试把菜单位置改为更大的值试试看。

高级选项：对自定义内容类型的设置，请把“拥有归档”勾上。

创建自定义分类法

打开 pods的添加界面，选择“创建新的”，接下来选择“自定义分类法”。

标签填写分类法名称，可以中文，比如填写“电影类型”，点击下面的“高级”，在 pod name填写分类法的机读名称，点击“下一步”，完成一个自定义分类法的创建。

创建完成以后，有几个标签页，主要关注以下几个：

高级选项中，“层级”，表示该分类法是否有层级关系，打上勾相当于“分类目录”分类法，不打钩相当于“标签”分类法，我建议打上勾。“相关内容类型”，为这个分类法应用到哪一个内容类型，比如我这里，勾上了“电影”。我在发布电影的时候，在右边栏就可以有电影类型选择了。

其他字段：这是为自定义分类法添加字段，这个按照需要开启，比如你想为电影类型中的科幻片分类添加一个略缩图字段等等。

创建自定义设置页面—制作主题选项

有没有觉得做主题的时候，为主题添加选项比较麻烦，pods有个超简单的方法，使用自定义设置页面轻松搞定。

打开 pods的添加界面，选择“创建新的”，接下来选择“自定义设置页面”，标签填写页面名称，可以使用中文，比如填写“主题选项”，菜单位置由自己选：在设置菜单、外观菜单下，新菜单，我这里选择添加到外观菜单。点击下面的“高级”，在 pod name填写自定义设置页面的机读名称，点击“下一步”，这样就完成了一个自定义页面的创建。

创建完成以后，可以去添加一些字段，比如我添加了：网站 logo、网站标题、网站关键字、网站描述、统计代码、网站备案号字段，要注意字段类型。

接下来保存后看看你的左边栏对应的菜单位置吧。

好了，pods的基础功能就这么一些，这些功能网上很多插件都能实现，其实更重要的内容，还在于他的组件，pods的组件给 pods扩充了非常多的功能，这才是 pods真正的强大之处。

pods组件

高级自定义内容类型

进入“pods管理-组件”，启用“Advance Content Type”。

这个时候，到 pods的添加页面，多了一项“高级内容类型”，选择它，这里我重新建立一个电影内容类型。点击“下一步”完成创建。

创建完成之后，会发现默认有了一些字段，这就是 WordPress默认的字段，你可以修改或者删除它。

编辑好字段以后，再去看看其他标签页。下面主要介绍重要的设置：

“管理界面”的“管理界面样式”，可以自己写个 WordPress管理后台页面。

“高级选项”的“标题字段”，如果修改了标题字段，或者想要改变标题字段，请在这里选择。

高级内容关系

进入“pods管理-组件”，启用“Advance Relationships”，这个时候在添加内容关系字段以后，你可以看到多了几行，这些高级的内容关系，可以创建更加复杂的内容关系。

权限与角色管理

进入“pods管理-组件”，启用“Roles and Capabilities”，如果你用过 members插件，你会发现这功能和 members功能很相似，一样的强大。可以对所有的权限分角色的管理，可以添加、编辑、删除用户角色。

更多组件

pods管理后台还有其他实用的组件，更多的组件功能，不一一介绍，看组件名字大概能清楚他的功能。pods**有提供其他组件，一些是单独的插件，一些是配合 pods工作的组件。

前端调用

模板命名

我发现，虽然很多人都会用自定义内容类型，但是内容类型的列表页不好做，即使做好，又该怎么放到菜单上显示出来，比如将“电影”列表页放在菜单中，自定义内容类型绑定了一个自定义分类法，又该怎么去显示分类法中某个分类下的文章，比如“科幻片”这个电影分类。

模板命名规则：

自定义内容类型模板命名规则：archive-{post_type_name}.php如 archive-movies.php

自定义分类法模板命名规则：taxonomy-{taxonomy_name}.php如 taxonomy-movie_type.php

自定义内容类型内容页模板命名规则：single-{post_type_name}.php如 single-movies.php

将内容类型加入到菜单，需要安装一个插件“Custom Post Type's Archive in WP Nav Menu”，安装好之后，没有任何设置界面，进入到“外观-菜单”，你可以发现菜单编辑区域的左边有了一个custom post type archives，现在内容类型就在这里了，如果你发现内容类型不在这，那就请到 pods的内容类型管理界面的高级选项中确认你的“拥有存档”这个选项已经打上勾了。

注：可能由于缓存问题，如果发现添加了内容类型到菜单后，前台点击内容类型的菜单出现404页面，请到“设置-固定链接”，点击一下保存即可。

数据调用

后台配置好，其实*主要的，还是要能够显示出来才是*重要的，pods的显示方法有三种：

短代码方式显示，短代码请参考 pods短代码文档，配合 pods**提供的 magic tags。

利用 pods的“page”和“template”组件，这两个组件可在 pods组件中开启，请参考文章。

利用模板函数，即将重点介绍。

这里只介绍模板函数方式调用 pods数据，因为这才是做主题开发时能使用的东西。

输出函数

Pods显示数据函数

pods_field_display($pod,$post->ID,'$field)

关于该函数的文档，请查看 pods**文档。

function pods_field_display($pod,$id= false,$name= null,$single= false)

参数数据类型备注

$pod(string) Pod name，即为 pods机读名称

$id(mixed)(选填)某篇文章ID或slug，以查询该篇文章数据

$name(string|array)字段名称，或者关联数组的参数

$single(boolean)(选填)是否以数组的形式返回

图像字段输出函数

pods_field_display()不会真正的显示出一张图片，而是显示出图片的 URL，pods特地为图片显示定义了一个函数：

pods_image($image,$size='thumbnail',$default= 0,$attributes='',$force= false)

关于该函数文档，请查看**文档。

function pods_image($image,$size='thumbnail',$default= 0,$attributes='',$force= false)

参数数据类型备注

$image(array|int|string)图片字段的数组，或ID，或guid

$size(string|array)图片大小样式

$default(int)如果图片不存在，则显示该图片$default

$attributes(string|array)图片属*(内部通过 wp_get_attachment_image获取)

$force(boolean)强制规定大小

图片有单张图片和多张图片，如不清楚单张与多张，请到 pods添加字段查看。如果字段是多张图片，那么会返回一个数组，所以，输出图像字段的代码为：

单张图片字段示例代码：

<?php

echo pods_image( get_post_meta($post->ID,$image_field_name, true),’original’);

?>

多张图片字段：

<?php

$images=get_post_meta($post->ID,’images’);

foreach($images as$image)

{

echo pods_image($image,’original’);

}

?>

输出字段注意事项：

yes/no字段：后台勾选“是”输出 1，不勾选输出空值。

Code字段：可执行 php脚本代码，输出 php代码执行结果。

Website字段：本人无法输出该字段内容，请勿使用。

因为 pods自定义字段也属于 WordPress内部自定义字段，所以依然可以使用 WordPress的 get_post_meta()输出，但是也并不是所有字段都能输出，经过测试，可直接使用 get_post_meta()函数输出的字段有：

Phone

Email

Password

Pptext

Date time

Pnumber

Currency

Color

对于其他字段，请使用 pods_field_display()；

模板代码段示例

在主循环中

代码示例：

<?php if(have_posts()):while(have_posts()): the_post();?>

<h1>

<a href="">

<?php the_title();?>

</a>

</h1>

<!--标题-->

<div>

<div>

<span>年份:</span>

<?php echo pods_field_display('movie',$post->ID,'time');//显示（年份）time字段?>

</div>

<div>

<span>区域:</span>

<?php echo pods_field_display('movie',$post->ID,'zone');//显示（区域）zone字段?>

</div>

<div>

<span>时长:</span>

<?php echo pods_field_display('movie',$post->ID,'how_long');//显示（时长）how_long字段?>

<span>分钟</span>

</div>

<div>

<span>海报:</span>

<?php echo pods_image( get_post_meta($post->ID,'poster', true),'original');//显示海报字段?>

</div>

</div>

<!--显示自定义字段-->

<div>

<?php the_excerpt();?>

</div>

<!--内容摘要-->

<?php endwhile;endif;?>

**循环示例代码

<?php query_posts('showposts=5&post_type=movie');while(have_posts()): the_post();?>

<h1>

<a href="">

<?php the_title();?>

</a>

</h1>

<!--标题-->

<div>

<div>

<span>年份:</span>

<?php echo pods_field_display('movie',$post->ID,'time');//显示（年份）time字段?>

</div>

<div>

<span>区域:</span>

<?php echo pods_field_display('movie',$post->ID,'zone');//显示（区域）zone字段?>

</div>

<div>

<span>时长:</span>

<?php echo pods_field_display('movie',$post->ID,'how_long');//显示（时长）how_long字段?>

<span>分钟</span>

</div>

<div>

<span>海报:</span>

<?php echo pods_image( get_post_meta($post->ID,'poster', true),'original');//显示海报字段?>

</div>

</div>

<!--显示自定义字段-->

<div>

<?php the_excerpt();?>

</div>

<!--内容摘要-->

<?php endwhile;wp_reset_query();?>

自定义设置页面（调用主题选项数据）

请注意$id参数为 pods-settings-{slug_name}，比如我的 pods name为 theme_option，那么$id的实参应该为'pods-settings-theme_option'。

<?php echo pods_field_display('theme_option','pods-settings-theme_option','site_logo');?>

<?php echo pods_field_display('theme_option','pods-settings-theme_option','site_title');?>

<?php echo pods_field_display('theme_option','pods-settings-theme_option','site_keyword');?>

<?php echo pods_field_display('theme_option','pods-settings-theme_option','site_description');?>

<?php echo pods_field_display('theme_option','pods-settings-theme_option','site_tongji');?>

<?php echo pods_field_display('theme_option','pods-settings-theme_option','site_beian');?>

用wordpress中文后台也能做英文外贸网站，如何做呢？

你的网站内容全部改成英文的，比如导航菜单名称（Home/about/product/contact us等项目）及对应整个页面内容都可以在后台页面（Page）处修改成英文。

你发布的产品一律可以修改成英文，一般是在文章（Post）或者主题对应的商品（Product）处修改，同理，案例展示（Portfolio）等都可以找到对应发布处修改。当然不同的主题有不同的控制菜单，你*悉之后就知道哪些内容是由哪些菜单控制的了。

注意要去掉文章（产品，案例等类目）里的（作者，发布时间，标签tag,分类，Meta等标签），使它不显示在前端，这些元素应该在主题选项里有。因为后台显示的中文，那么这些项目不去掉会在前端也显示中文，在整体英文的环境里出现一些中文字样，怪怪的。

*好的方法，建议你一开始用wordpress英文版安装，然后在设置（setting）-常规（general）选项里，语言选项（language）里选中简体中文，建站过程中用中文后台编辑整站，用英文填充各页面内容，等整站制作完毕之后，再从这里把语言切换到(English--United States)即可。等你*悉了wordpress后台之后，也许就不必调来调去了，对应的地方你不必认识英语也都知道各自是哪项做什么的了。以上建议仅供参考。

wordpress是一个CMS，也就是内容管理系统。其实吧，它分为MVC三块。M指的是model，也就是模型，它是与数据库相关的，由那些php程序完成；V指的是view，也就是视图，它直接决定了网站长成什么样子，是由那些主题文件决定的；C指的是controller，也就是当你输入url之后，要用到哪个视图，哪个模型，也是由php程序完成。

因此，显而易见，要想自适应屏幕，就要修改主题文件。

主题文件里有html（在wp里是php渲染成html）、css、js，在这些文件里，css决定了你网站的外貌，因此修改css文件。

在css编程里，有一种“响应式布局”，通过媒体查询、流式布局、液态图片来实现不同屏幕的适配。你可以自己写媒体查询的css文件。当然，现在网上也有很多现成的前端ui框架，比如*常用的bootstrap，你可以在它的基础上进行修改。