wordpress主题使用教程

怎么安装定制v主题?

  1. 准备环境首先用wordpress需要系统支持,相应的php mysql和apache等环境。具体看下图

  2. 这里我们以win系统为例,下载安装一个wmap环境。比如appserv服务,这里咗嚛直接安装好了。

  3. 下载wordpress现在开始了,我们先去网站下载搜索一个wordpress,建议去官网下载

  4. 找到wordpress官方站点,点击下载wordpress. win版本下载zip格式,linux下载gz格式

  5. 准备安装下载好wordpress,解压放到appserver或其他php环境的www网站目录下

  6. 新建数据库首先访问phpmyadmin进入数据库,创建一个wordpress数据库。左左举例而已,你可以改成其他名字

  7. 开始安装

  8. 打开网站/wordpress界面,进入安装配置向导界面,点击【现在开始】

  9. 进入安装。如图,输入数据库 用户名和密码点击设置,提交

  10. 验证通过mysql数据库权限之后,开始进入安装【现在安装】

  11. 设置网站信息接下来的界面,配置wordpress定制信息设置界面。点击【安装wordpress】

  12. 完成安装,如果需要登录,点击【登录】

  13. 跳转到登录界面,输入账号密码即可

  14. 进入到wordpress后台,如左左截图。可以进行设置你的站点啦,修改上传主题 插件开始你的网站之旅吧

WP主题开发14:怎样添加wordpress主题trans的文章列表页模板?

在前面的章节中,我们创建了wordpress主题trans的公共模板:header.php头部模板、sidebar.php侧边栏模板、footer.php底部模板,这样就更加方便了trans主题的其它动态模板的开发。就比如,今天我们要开发的模板——文章列表页模板,就不需要再去修改头部、侧边栏、底部的代码了。好了,闲话不多说,我们直接进入到今天的主题当中,怎样添加trans主题的文章列表页模板?

第一步:创建列表页模板文件。

在trans主题目录下创建一个列表页模板的文件——archive.php。wordpress程序默认的文章列表页模板的名字必须是:archive 或 categoty,也就是说,可以是archive.php,也可以是category.php,我们这里用archive.php。

第二步:引入头部模板。

用sublime等编辑器打开trans主题的静态模板list.html,把你的代码复制到archive.php文件中。然后,在代码找到</header>这句代码,从<!doctype html>与</header>之间的所有代码全部删除,因为这段代码,我们已经可以使用公共模板——header.php来代替了。

删除后,我们再来引入header.php这个头部模板:

< ?php get_header(); ?>

这时,我们可以正常打开列表页了。但是有一个小问题:标题显示的不是文章分类的名称,仍然是网站的名称。而我们需要的效果是,在列表页时,我们需要显示的是文章分类目录的名称。所以,我们要在header.php文件中的<title></title>标签中修改一个调用代码,

原代码是:

< title>< ?php echo get_bloginfo("name"); ?></title>

修改成如下代码:

< title>< ?php if(is_home()){echo get_bloginfo("name"); }else{if(is_category()){$cat_c = get_the_category();echo $cat_c[0]->cat_name; echo " - "; bloginfo("name");}else{the_title(); echo " - "; bloginfo("name");} } ?></title>

这段代码的意思是:如果是网站的首页,就显示网站的名称;如果是列表页,就显示为“分类目录名称 + 网站名称”;否则就显示“文章标题+网站名称”。

第三步:引入右侧边栏模板。

在archive.php中找到< div class="c_right">标签中的所有代码,删除掉,然后,在当前位置上,引入公共模板sidebar.php侧边栏模板,代码如下:

< ?php get_sidebar(); ?>

这样,我们就不需要再去修改原< div class="c_right">标签内的代码了,而只需直接把sidebar.php拿来用就可以了。

第四步:引入底部模板。

同上,在archive.php代码中找到< footer>标签,然后,把< footer>及它后面的所有代码全部删除掉,现在不需要了,因为,我们有footer.php底部公共模板了。删除掉后,我们在原位置上直接引入这个footer.php底部模板,代码如下:

< ?php get_footer(); ?>

在引入完头部、侧边栏、底部的公共模板后,我们再来看看archive.php的模板代码,如下图:

然后,我们只需要修改archive.php模板代码中的 < div class="c_left">标签内部的代码就可以了。

第五步:修改左侧主体部分。

其实,我们查看trans主题的静态代码的效果时,我们可以看到,列表页与首页基本上是一样的,只是左侧的顶部多了一个面包屑导航。所以,我们只需要修改< div class="c_left">标签里的代码就可以了(如上图所示)。我们可以先把archive.php代码中的< div class="c_left">里的代码全部删除掉,然后把首页模板index.php代码中的< div class="c_left">所有代码全部复制下来,粘贴到archive.php中。这段代码包括了左侧的文章列表以及分页按钮。这样,archive.php的左侧主体部分基本弄好。

第六步:添加面包屑导航。

我们在archive.php模板的< div class="c_left"> 标签中的< div class="left_bottom">标签的上方,添加发下代码:

< div class="left_top">< ul>< li><span class="dashicons-before dashicons-admin-generic"></span><?php echo $cat_c[0]->cat_name; //获取当前分类名 ?></li>< li>< a href="< ?php bloginfo("siteurl"); ?>">< span class="dashicons-before dashicons-admin-home"></span>首页</a> > < ?php the_category(","); ?></li></ul>< ul>< ?php $cat_desc = $cat_c[0]->category_description; //获取当前分类的描述。if($cat_desc){echo $cat_desc; }else{echo $cat_c[0]->cat_name; //获取当前分类名}?></ul></div>

这段代码中,我们又用到了几个wordpress的函数:

the_category(","):获取当前分类导航;$cat_c = get_the_category():获取当前分类的信息,并赋值给$cat_c这个变量

面包屑导航的主要作用,就是让用户可以看到当前页面所在的个体位置。而且,可以通过点击面包屑导航中的相关链接,可以跳转到链接页面,如:返回首页(如下图)。

?通过上面的几步,我们就完成了wordpress主题trans的文章列表页动态模板的修改。嗯,是不是有一个小小的发现:修改trans主题的列表页模板要比修改首页模板index.php所花的时间要少得多。是的,因为在修改index.php首页模板时,我们需要所有的代码,而修改archive.php模板时,我们只需要把公共模板拿来直接用就可以了,省去了大量的时间,这就是公共模板的魅力之所在。好了,本节就介绍到这里,如有疑问,欢迎点评。

wordpress主题下载,wordpress建站主题模板(详见图片)

wordpress主题下载,是可以快速、完全可定制且美观的 WordPress 主题,适用于博客、个人作品集、企业网站和WooCommerce店面。wordpress主题下载非常轻量级(前端小于 50KB)并提供无与伦比的速度。wordpress主题下载在构建时考虑到了SEO,集成了 Schema.org代码,并且已准备好原生AMP,因此搜索引擎会喜欢这样的网站。它提供了特殊功能和模板,因此它可以与 Elementor、Beaver Builder、Visual Composer、SiteOrigin、Divi 等所有页面构建器完美配合。

wordpress主题下载是建立在坚实的设计基础之上,信奉每个人都应该拥有一个真正独特的网站的理念。主题的微妙风格受到多样性和多功能性的启发:wordpress主题下载排版轻巧而坚固,调色板取材于大自然,布局元素轻轻地放在页面上。真正丰富之处在于它的定制机会。该主题旨在利用WordPress5.9 中引入的完整站点编辑功能,这意味着可以自定义站点上每个页面的颜色、排版和布局以适应网站的愿景。wordpress主题下载还包括数十种块模式,只需单击几下即可打开各种专业设计布局的大门。

刚刚也说了wordpress主题下载是一个超级快速、易于定制的多用途主题。它非常适合博客、小型企业、初创公司、以及个人网站和大多数类型的项目。wordpress主题下载是一个完全AMP优化和响应式的主题,wordpress主题下载将在几秒钟内加载并完美适应任何观看设备。虽然它轻巧且设计简约,但主题具有高度可扩展性,它具有高度 SEO优化的代码,从而在搜索引擎结果中排名靠前。

wordpress主题下载也是的开源主题,支持中文,和Dobby一样都是非常简洁的主题,wordpress主题下载这款主题的功能非常多,比如顶部头图、幻灯片、左右侧边栏等,在中文方面也做了许多优化,社交功能、社交分享等,不管是做个人博客还是企业网站都是不错的选择。

wordpress主题下载是更加现代的、更加轻量的主题,有着非常多样的主题选项,站长可以定制主题的头部、底部和整体布局,主题包含页面编辑器模版,可以兼容任何可视化编辑器,即使是企业站,也能轻松应付。另外如果站长有更多个性化的需求,还可以升级wordpress主题下载,有着更多的主题定制选项,这样就可以一键导入模版,模块化设计更加轻量,并且是不限制站点数量。

wordpress主题下载是基于古腾堡编辑器而制作的主题,并配备了非常多的扩展选项,站长可以定制网站的布局,比如调整网页最大宽度、调整元素间的距离,wordpress主题下载还设置网页背景、调整侧边栏、字体样式等等各种选项。如果站长有更多的定制需求,wordpress主题下载还提供了头部和底部定制器,可以用拖拽的方式定制博客样式,是站长做站时非常好用的主题。wordpress主题下载是免费的WordPress主题,主要为个人网站或者企业网站快速搭建网站,wordpress主题下载内置了大量的定制选项,比如各类字体,颜色定制,布局选择,Logo上传、标题图像,吸顶导航等等。

WP主题开发16:wordpress主题trans,搜索页模板如何创建?

在wordpress主题的动态模板中,搜索页模板并不是必须的。但是,为了对用户更加的友好,可以让用户在wordpress网站上能够通过搜索来查找自己的想要的文章内容,我们还是有必要给trans主题添加一个搜索页模板。一般情况下,wordpress主题动态模板的搜索页的整体布局和文章列表页模板是差不多的,所以,我们可以参照文章列表页来做。

第一步:创建一个search.php文件。

在wordpress主题trans目录下创建一个search.php文件,这是wordpress程序要求的默认搜索页模板的文件,名字必须是search。然后,把trans静态模板search.html文件中的代码全部复制到search.php文件中。

第二步:修改头部的代码。

在search.php文件中,删除从< !doctype>到< /header>标签之间的所有代码。然后,在同样的位置,通过wordpress函数来引入公共的头部模板文件:

< ?php get_header(); //引入头部模板 ?>

修改头部模板header.php文件中的搜索表单的代码,代码如下:

< form action="< ?php bloginfo("siteurl"); ?>" method="get">

< input type="search" name="s" placeholder="搜索...">

< input type="submit" value="搜索">

</form>

注:第一个input输入框的name值必须是 s (如上图),这也是wordpress的硬性要求。否则,就搜索不到任何内容。

第三步:修改search.php的侧边栏代码。

在search.php文件中,删除< div class="c_right">标签所包含的所有侧边栏代码,然后,在这个位置上,引入sidebar.php侧边栏公共模板:

< ?php get_sidebar(); //引入侧边栏模板 ?>

第四步:修改搜索页模板的底部代码。

在搜索页模板中,删除从< footer>标签到模板代码结束的所有底部代码,然后,在当前的位置上,添加如下代码引入底部公共模板:

< ?php get_footer(); //引入底部模板 ?>

第五步:修改search.php的左侧主体部分的面包屑导航。

因为是搜索页面模板,所以,这个面包屑导航,我们要体现出搜索结果。所以,我们删除search.php模板中< div class="left_top">标签内部的所有代码,替换成如下的代码:

< ul>< li>< span class="dashicons-before dashicons-admin-generic"></span>搜索</li>< li>< a href="<?php bloginfo("siteurl"); ?>">< span class="dashicons-before dashicons-admin-home"></span>首页</a> > 搜索结果</li></ul>< ul> 关键词“< ?php the_search_query(); ?>”共有 < ?php global $wp_query; echo $wp_query->found_posts; ?> 个搜索结果</ul>

上面代码解说:

the_search_query():输出要搜索的关键词;$wp_query:是wordpress提供的一个全局变量,它包含当前页面的所有查询数据;$wp_query->found_posts:搜索当前关键词的数量

搜索页面包屑导航效果如下图:

第六步:修改搜索页模板左侧的文章列表。

删除search.php搜索页模板中< div class="left_bottom">标签内部的所有代码,然后,替换成如下代码:

< ?php if ( have_posts() ): while ( have_posts() ) : the_post();?>< div class="list">< ul class="list_h">< a href="< ?php the_permalink(); ?>">< ?php the_title(); ?></a></ul>< ul class="list_con">< ul class="list_con_left">< a href="< ?php the_permalink(); ?>"> < ?php if(has_post_thumbnail()) { //如果有特色图片,就调用特色图片the_post_thumbnail( 'thumbnail' ,array( 'alt' => trim(strip_tags( $post->post_title )), 'title' => trim(strip_tags( $post->post_title )))); }else { //否则调用文章第一张图片echo '<img src="'.catch_first_image().'" alt="'.$post->post_title.'" width="150" height="150" />';}?></a></ul>< ul class="list_con_right">< li>< ?php echo mb_substr(strip_tags($post->post_content),0,120,'utf-8'); ?> ... </li>< li>< span class="dashicons-before dashicons-admin-users">< ?php the_author(); ?> </span>< span class="dashicons-before dashicons-calendar-alt">< ?php the_time("Y年m月d日"); ?> </span>< span class="dashicons-before dashicons-visibility">< ?php echo get_post_meta($post->ID, 'views', true); ?> </span></li></ul></ul></div>

< ?php endwhile;endif;?>

这段代码,我们在archive.php文章列表页模板中我们已经介绍过了,就不多说了。

第七步:添加分页代码。

在trans静态模板的代码中,我们没有分布代码,这里,我们添加上搜索结果的分页效果代码:

< div class="left_page">< ?phpthe_posts_pagination( array('mid_size' => 3, //当前页码数的 两边 显示几个页码。'prev_text' =>'<', //上一页'next_text' =>'>', //下一南) );?></div>

这里,我们使用到了wordpress提供的分页函数the_posts_pagination()来实现搜索页的文章列表的分页效果。这个函数我们在修改首页模板时,我们就介绍过了,如果想了解它,可以回到我们创建首页模板index.php的文章去看看。

?好了,通过以上几步,我们就完成了wordpress主题动态模板trans的搜索页面模板的创建和修改。此时,我们在头部搜索框中输入关键词进行搜索后,搜索结果如上图所示。从这几节课,我们可以看出,有了公共模板后,我们创建其它动态模板时,就方便多了,只要按照本节的几个步骤,就可以很轻松地创建出wordpress主题的动态模板文件。如果喜欢我的文章,别忘了帮我“点赞、评论和关注我”哦。