前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >WordPrss自带REST API在外站列出文章实例

WordPrss自带REST API在外站列出文章实例

原创
作者头像
Liues
修改2018-08-03 11:44:03
8740
修改2018-08-03 11:44:03
举报
文章被收录于专栏:流点星流点星流点星

简单介绍REST API

WordPress REST API提供了一组易于使用的HTTP端点,使您可以以简单的JSON格式访问站点的数据,包括用户,帖子,分类等。检索或更新数据就像发送HTTP请求一样简单。

想要获取您网站的帖子?只需发送GET请求即可/wp-json/wp/v2/posts。更新ID为4的用户?发送POST请求/wp-json/wp/v2/users/4。获取搜索字词“awesome”的所有帖子?GET /wp-json/wp/v2/posts?search=awesome。就这么简单。

详细请看http://v2.wp-api.org/

简单实例

实例教程开始前,请保证您的主题或者插件中没有代码去除了REST API功能,如果有,您可以咨询主题的制作人或者自行百度[aru_42]

1.新建JS文件,将下面代码复制进去(也可以直接用<script>...</script>框起来调用,注释了的地方可以按自己的需求更改)

$('.menu a').click(function(){
    target = $(this).attr('goto');
    switchTo(target);
    $('.menu li a').each(function(){
        $(this).removeClass('active');
    });
    $(this).addClass('active');
});

function switchTo(target){
    $('.right section').each(function () {
        $(this).removeClass('active');
    });
    $(target).addClass('active');
}

function getAchives(){
    t = ``;
    $.ajax({
        type:"GET",
        url:"https://www.liues.cn/wp-json/wp/v2/posts?per_page=8&page=1", //这里的网站改成你自己的站点
        dataType:"json",
        success:function(json){
            for(var i = 0;i < json.length;i++){
                title = json[i].title.rendered;
                link = json[i].link;
                time = new Date(json[i].date).Format("yyyy-MM-dd");
                t += `<li><a href="${link}" target="_blank">${title} <span class="meta">/ ${time}</span></a></li>`; //这里可以根据需求自己更改样式
                $('.archive-list').html(t);
            }
        }
    })
}

// 对Date的扩展,将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符, 
// 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) 
// 例子: 
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 
// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18 
Date.prototype.Format = function(fmt){ //author: meizz 
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if(/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1,(this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for(var k in o)
        if(new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}

$(document).ready(function(){
    getAchives();
    setTimeout(function(){$(".loading").hide();},1500);
});

2.在你的网站上调用这个JS文件

(框起来的直接跳过这一步)

3.在你的网站中调用JQuery

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

上面的为BootCDN的CDN,BootCDN ban 了.cc 以及.top 域名,如果为以上域名的请自行下载放本地或者调用其他CDN的js

4.在网站合适的地方加上以下代码

<ul class="archive-list">
   <li>Loading...</li>
</ul>

效果

如果您完成了所有步骤,那么您将看到和下面图片一样的效果

如果您想要将您的网页美化,那么请自行修改,我的个人主页站izstar.cn就是一个美化的例子[aru_31]

最后

如果您想自定义其他利用REST API实现的实例,请自行脑洞!可以参照官方的介绍自定义:http://v2.wp-api.org/

好了,如果文章中有什么错误,欢迎在评论中指正!

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 简单介绍REST API
  • 简单实例
    • 1.新建JS文件,将下面代码复制进去(也可以直接用<script>...</script>框起来调用,注释了的地方可以按自己的需求更改)
      • 2.在你的网站上调用这个JS文件
        • 3.在你的网站中调用JQuery
          • 4.在网站合适的地方加上以下代码
          • 效果
          • 最后
          相关产品与服务
          内容分发网络 CDN
          内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档