wordpress主题安装教程视频教学-wordpress支持的主题安装方式
编辑整理：整理来源：360问答，浏览量：62，时间：2023-04-08 17:16:01
前沿：wordpress主题安装教程视频教学
补充知识：后台有个主题安装的。也可以把安装包解压放到wp的主题目录下 http://www.lyblog.info
欢迎来到《真香，30天做一套wordpress主题》系列文章，我们的目标是花上30天的时间闭关修炼，建立一套全新的wordpress主题，如果你看到的第一篇文章不是《基础框架搭建》，建议你关注我们（数字江湖异志录），从该系列的第一篇开始阅读。
我们将尽量保持文章的循序渐进和通俗易懂，请确保自己已经掌握了那一篇文章的全部内容时才选择跳过，不然可能会错过关键的信息噢~
这里我们假定你已经知晓了以下基础知识，这些基础知识对理解文章内容是至关重要的：
1. HTML/CSS/JS基础
2. PHP基础
3. 如何使用Wordpress
4. 如何搭建web环境
如果你已经知晓了以上基础知识，恭喜你，本系列的任何文章内容对你而言都没有什么难度。
文章详情页今天（第11天）就是本系列文章的最后一篇了（说好的30天呢？！），网络上已经出现了很多非法转载本文的网站，希望你们能在采集后记得手动把我骂你们的这句话删除，XXXXXX，本文首发于号数字江湖异志录和本人博客hhacker.com，非以上渠道看到本文的读者都是看到了非法转载的文章。为什么提前结束呢，因为制作的进度的确超过了我的想像，很多东西封装好以后，复制复制就能用，实在是太赞了，废话不多说，我们开始singular.php文章详情页的主题文件制作。
还是老套路，从home.php整个复制一套过去，我们只需要关注左侧区域的文章内容就可以了。
<?php while (have_posts()) { the_post(); the_content(); } ?>以上代码插到main-container里，直接搞定，今天我们的任务就完成了：
等等，作者你这也太敷衍了吧，好好好，我们样式也没有，标题也没显示，这样当然不行，我只是开个玩笑嘛。
我们首先要做的就是把内容区域AMP化，但是一个一个去把img替换成amp-img,video替换成amp-video实在是太麻烦了，并且还有很多细节上的处理直接替换肯定是不行的，怎么办呢，还好伟大的开源世界早已有了成熟的技术方案：amp-library（），它的作用就是将传统的HTML转换成AMP HTML。
正常的用法应该是composer intall安装，但是这里我们为了方便直接在把库文件放到主题文件夹里进行引用，在functions.php末尾添加：
require_once __DIR__ . '/lib/vendor/autoload.php';再次打开一个博客文章详情页，没报错就基本OK了，我们写一个公共方法html2amp来做这个转换，这样在主题文件里只需要调用就可以了：
function html2amp($html='') { $amp = new Lullabot\AMP\AMP(); $amp->loadHtml($html); return $amp->convertToAmpHtml();}这里需要注意的是，因为AMP的技术规范要求，如果你在本地加载非http资源的话，也就是如果文章内容里的音频、视频是http协议地址，会出现src内容为空的情况，这不是bug，这是特性。
如此我们的文章页就完整了AMP化。
然后我们将文章标题和日期、作者等信息在内容顶部显示出来：
<div class="flex-box"> <div class="flex-box post-meta-box"> <a class="post-meta" href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) ?>"><span class="iconfont icon-mr-postmeta"></span><?php esc_html(the_author()); ?></a> <a class="post-meta" href="<?php the_permalink() ?>"><span class="iconfont icon-mr-postmeta"></span><?php the_time( get_option( 'date_format' ) ); ?></a> <a class="post-meta" href="<?php the_permalink() ?>#comments"><span class="iconfont icon-mr-postmeta"></span><?php comments_number('0', '1', '%'); ?></a> <a class="post-meta" href="<?php the_permalink() ?>"><span class="iconfont icon-mr-postmeta"></span><?php echo (int)get_post_meta(get_the_ID(), 'views', true); ?></a> <a class="post-meta" href="<?php the_permalink() ?>"><span class="iconfont icon-mr-postmeta icon-like-sp"></span><?php echo (int)get_post_meta(get_the_ID(),'likes',true); ?></a> <?php if ($edit_link = get_edit_post_link(get_the_ID())): ?> <a class="post-meta edit-link" href="<?php echo esc_url($edit_link);?>"><span class="iconfont icon-mr-postmeta"></span><?php _e('Edit')?></a> <?php endif; ?> </div> </div>然后我们开始一个一个把文章内容block样式化，这里我们主要处理以下几种block：
1.1 image 图片
1.2 cover 图片上盖文字
1.3 H1~H6(常用H2 H3 H4) heading文字
1.4 quotes 引用文本
1.5 paragraphs 段落文本
1.6 Gallery 图集
1.7 ol/ul 有序/无序列表
1.8 文本加粗
1.9 Download 文件下载
这里我们不去动wordpress生成的DOM结构，加加样式就好。
Image图片：
Cover图片
Heading 标题
Quotes引用文本：
段落文本：
Gallery图集：
ol / ul 有序/无序列表：
Download下载：
顺便再做做移动端适配，内容区域这里我们基本上就OK了。
还记得我们在做文章列表用到了一个点赞属性吗？这个点赞功能是原wordpress里没有的，需要我们自己用postmeta属性来实现，这里我们在文章底部加上这个功能，如果不用amp的话这里直接就是ajax请求就可以了，用amp的话怎么办呢？我们直接用amp-form的action-xhr就可以了。
我们先在functions.php里写点赞的ajax功能：
// add likesfunction set_post_likes(){ $id = (int)$_POST["post_id"]; if ( $_POST['action'] === 'likes'){ $raters = (int)get_post_meta($id,'likes',true); if (!isset($_COOKIE['likes_'.$id])) { setcookie('likes_'.$id,$id,time() + 99999999,'/',$_SERVER['HTTP_HOST'],false); update_post_meta($id, 'likes', ($raters + 1)); } wp_send_json(['likes'=>get_post_meta($id,'likes',true), 'class'=>'likes-button-active likes-button']); } wp_die();}add_action('wp_ajax_nopriv_likes', 'set_post_likes');add_action('wp_ajax_likes', 'set_post_likes');这里我们同样是利用了update_post_meta存储数据，有两个需要注意的地方，我们在代码里存了一个cookie值，防止重复点击点赞数直接被刷爆，但是这样其实也只是防君子不防小人而已。第二个地方是我们声明了两个action，wp_ajax_nopriv_开头的和wp_ajax开头的分别代表未登录和已登陆用户可用到的ajax action，这样我们在调用/wp-admin/admin-ajax.php时wordpress才能找到正确的代码位置。
<form class="likes-form" method="post" action-xhr="<?php echo follow_scheme_replace(get_site_url(null, '/wp-admin/admin-ajax.php'))?>" target="_top" on="submit-success: AMP.setState({'likes': event.response.likes,'likesClass': event.response.class})" > <input type="hidden" name="post_id" value="<?php echo get_the_ID() ?>" /> <input type="hidden" name="action" value="likes" /> <button type="submit" [class]="likesClass" class="likes-button <?php if (isset($_COOKIE['likes_'.get_the_ID()])) echo 'likes-button-active';?>" [text]="likes"> <?php echo (int)get_post_meta(get_the_ID(),'likes',true); ?> </button> </form>这里我们的amp-form使用的是action-xhr，这就和jQuery里的ajax调用是一样的了，然后我们用amp-bind对数据做了绑定，这样我们的点赞按钮就能在点赞后直接显示出最新的点赞数据。这里我们要记得在header里把amp-bind的库文件加载进来。
最后加上样式之后，我们的点赞按钮就完成了（另外别忘了做移动端CSS适配）：
接下来我们把上一篇、下一篇文章的导航链接做一下：
<nav class="post-nav"> <?php $prev_post = get_previous_post(); $next_post = get_next_post(); ?> <div class="nav-previous"> <?php if (!empty($prev_post)): ?> <a class="post-nav-link-active" title="<?php echo $prev_post->post_title;?>" href="<?php echo get_permalink($prev_post->ID); ?>"><?php _e('Previous Post')?></a> <?php else: ?> <a><?php _e('Previous Post')?></a> <?php endif; ?> </div> <div class="nav-next"> <?php if (!empty($next_post)): ?> <a class="post-nav-link-active" title="<?php echo $next_post->post_title;?>" href="<?php echo get_permalink($next_post->ID);?>"><?php _e('Next Post')?></a> <?php else: ?> <a><?php _e('next Post')?></a> <?php endif; ?> </div> </nav>这里需要注意的地方是get_previous_post和get_next_post的第一个参数，如果传入一个true的话，则上一页和下一页的指向会是同目录下的文章，默认不指定则是整个博客的文章。
接下来是增加社交分享组件，首先引入amp-social组件库：
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>然后在页面里直接添加需要的社交分享类型就可以了，简直不要太方便！
<div class="social-share"> <div class="social-share-box"> <amp-social-share class="rounded" type="email" layout="responsive" width="20" height="20"></amp-social-share> </div> <div class="social-share-box"> <amp-social-share class="rounded" type="linkedin" layout="responsive" width="20" height="20"></amp-social-share> </div> <div class="social-share-box"> <amp-social-share class="rounded" type="pinterest" layout="responsive" data-param-media="https://amp.dev/static/samples/img/amp.jpg" width="20" height="20"></amp-social-share> </div> <div class="social-share-box"> <amp-social-share class="rounded" type="tumblr" layout="responsive" width="20" height="20"></amp-social-share> </div> <div class="social-share-box"> <amp-social-share class="rounded" type="twitter" layout="responsive" width="20" height="20"></amp-social-share> </div> <div class="social-share-box"> <amp-social-share class="rounded" type="wtsapp" layout="responsive" width="20" height="20"></amp-social-share> </div> <div class="social-share-box"> <amp-social-share class="rounded" type="line" layout="responsive" width="20" height="20"></amp-social-share> </div> </div>这里我们没设置facebook的分享，facebook是个奇葩，只有它需要一个额外的app_id参数，需要使用者自己到facebook后台生成并绑定域名，太麻烦了，把它去掉。
然后是文章标签，这个也非常简单：
<div class="post-tags"> <?php if ( get_the_tags() ) { the_tags('', '', ''); } ?> </div>这样几句话就完事了，加上简单的CSS描述之后：
最后我们来做文章评论部分，这里稍微麻烦一点,首先直接在singular.php文件里输出：
<?php comments_template(); ?>然后建立comments.php文件，也就是评论的模板主文件：
<div id="comments" class="comments content"> <?php if (post_password_required()) : ?> <p><?php _e( 'Post is password protected. Enter the password to view any comments.' ); ?></p> <?php else: ?> <?php if (have_comments()) : ?> <h2><?php comments_number(); ?></h2> <ul> <?php wp_list_comments();?> </ul> <?php paginate_comments_links( array( 'next_text' => '', 'prev_text' => '', ) ) ?> <?php endif; ?> <?php if ( !comments_op() && post_type_supports( get_post_type(), 'comments' ) ) : ?> <p><?php _e( 'Comments are closed here.'); ?></p> <?php else: ?> <?php comment_form(); ?> <?php endif; ?> <?php endif; ?></div>这里我们把这个容器的id定为comments，这样做是为了方便锚链接，然后我们把content样式给它，让它复用一些内容区域的样式。
还有一定要注意paginate_comments_links一定要加上，这样子评论才支持分页，同样我们不对wordpress输出的html结果做过多的改动，基本保持原样输出，加上样式就ok了。
如此，我们的评论部分就完成了。
总结和预告本文是本系列的最后一篇，文章详情页完成后我们的整套主题就全部完成了，当然了，还有很多细节上的地方可以修正，但是总的来说我们已经完成了整套主题的开发！只用了11天，比预想的30天早了好多（吃瓜群众：让你以后还敢乱取标题！），很多地方像是css的描述因为过于冗长，所以没在文章内贴出，因为本系列文章的目的是抛砖引玉，并不是纯粹的代码展览。
接下来的系列文章，我还没有明确的主题，如果大家有什么好的建议，可以私信或评论留言，让我们以技术为出发点，探讨交流美好的事物。
补充拓展：wordpress主题安装教程视频教学
一 wordpress安装
我用的是XAMPP(Apache+MySql+PHP)，wordpress(BLOG程序)3.5.实社真齐两老环末1 简体中文官方安装版 ，下面来说说Windows下用XAMPP安装wordpr冲划黄呢九兰孔一ess的方法。
安装XAMPP就是傻瓜式的next、next。安装完成之后运行Control Panel，启动Apache和Mysql，如下图
选择Mysql后面的Admin进入数据库管理界面 ，如下图
我们先建立数据库，随便命名，这个数据库作为wordpress安装时要用到的数据库。
下载wordpress，wordpress(BLOG程序)3.5.1 简体中文官方安装版 ，解压后将得到的wordpress文件夹拷贝到XAMPP安装目录下的htdocs文件夹下。接下来浏览器中访问/localhost /worpress，在出现的界面中点击么信依送述被破负器呢Create a configuration File。在接下来的界面中输入数据库的名字(你一开始建立的)，User Name 填写红持别行眼干乙临root，Password 填空，点击submit。接下来设置网站标题，密码，邮箱等等。安装完成之后就可以用admin用户名和你刚才设置的密码进行后台登陆了。可以在后台信查级令齐商常规设置中设置站点的地址。
如果想让局域网访问站点，需要对Apache进行配置，否则有可能无法显示图片等等，具体方法是点击面板中Apache后面的config，打开httpt.conf文件。在该文件中输入以下代码即可。
DocumentRoot D:/江希意美烈盐胡xampp/htdocs/wordpress(wordpress路径)
二 wordpress转移
首先用WordPress Database Backup这个插件对wordpr调子损动想ess进行备份，导出sql文件。为了方便在新的机二袁利地器上建立同样名字的数据库，按照上面的步骤进行wordpress 的安装，接下来导入sql文件，并且拷贝原来的主题、插件等到新的wordpress文件夹中。由于域名的改变需要对数据库进行修改，主要是对wp- option物货广如甚跑元留真s和wp-posts表进行修改。
在wp-opti入景某ons中运行如下sql语句
还矛冲配工红较可器但update wp_options set option_value='新的地址' where option_name='siteurl';
update wp_options set option助任松利联亮拉_value='新的地章址' where option_name='home';
update wp_posts set guid = replace(guid,'旧地址','新地址'); 在wp-posts中运行如下sql语句
update wp_posts set post_content=replace(post_content,'旧地址','新地址');
update wp_posts set post_excerp= replace(post_excerpt,'旧地址','新地址');
这样你的博客就成功迁移了。
三 wordpres往无找赶s一些细节
上传图片一般需要英文名字。
最大上传文件大小为2M，修改的话需要修改php.i早境怀活ni文件，post_max_size=800M memory_limit=800M upload_max_filesize=少架措奏轴仅修础皇相济800M，大小可以随你，并在wp-config.php文件中加一句 define('WP_MEMORY_LIMIT','800M')。
修改模板的颜色大小等一般在css文件中。
如果图片，格式显示不正常，估计是没有配置apache。
卸载XAMPP时先停止服务，然后卸载服务，然后卸载XAMPP应用，这样下次安装一般不会出现什么问题。
先写这么多，以后遇到什么问题再补充。
行业热门话题：
【wordpress怎么安装主题】【wordpress支持的主题安装方式】【wordpress主题】【wordpress主题制作教程】【wordpress软件下载主题】【wordpress app主题】【wordpress主题0skr】【wordpress主题在哪个文件夹】【wordpress主题divi】【wordpress7b2主题】相关推荐：
wordpress主题安装教程视频教学-wordpress支持的主题安装方式
wordpress主题安装教程视频教学，wordpress支持的主题安装方式，wordpress主题
作者：整理来源：360问答，时间：2023-04-08 17:16，浏览：63