jQuery Mobile 中来自 Wordpress JSON 的新闻页面

Posted 2023-03-15

【中文标题】jQuery Mobile 中来自 Wordpress JSON 的新闻页面

【英文标题】：News Pages from Wordpress JSON in jQuery Mobile

【发布时间】：2012-04-11 20:20:28

【问题描述】：

我开始使用 jQuery Mobile 和 PhoneGap。我有一个应用程序，我想显示来自 Wordpress 博客的五个最新帖子，当您单击一个时，它会在新页面中加载该帖子的内容。使用 JSON api 插件，我能够吐出最近帖子的标题列表。

我坚持的是将这些标题制作成链接，这些链接将加载具有各自内容的新页面。我已经阅读了有关动态页面生成的 JQM 文档，但我有点迷失了。

我当前的代码如下所示：

var urlNews="http://wordpress-site.com/";
$.getJSON(urlNews,function(json)
        $.each(json.posts,function(i,post)
            $("#recentNews").append(
            '<li><a href="#dont-know-what-to-put-here" class="ui-link">'+post.title+'</a></li>'
         );
      );
      $('#recentNews li:gt(4)').remove();
);

我尝试改编官方文档here中的示例代码，但没有任何运气。

【参考方案1】：

这是我用来显示 Wordpress 博客内容的代码：

    var MYBLOG_LIMIT = 7;
var MYWRAPPER_CLASS = 'homeblog';

var WP=open:function(b)var a=posts:function()var d=MYBLOG_LIMIT;var e=0;var c=all:function(g)var f=b+"/api/get_recent_posts/";f+="?count="+d+"&page="+e+"&callback=?";jQuery.getJSON(f,function(l)var k=l.posts;for(var j=0;j<k.length;j++)var h=k[j];h.createComment=function(i,m)i.postId=h.id;a.comments().create(i,m)g(k)),findBySlug:function(f,h)var g=b+"/api/get_post/";g+="?slug="+f+"&callback=?";jQuery.getJSON(g,function(i)h(i.post)),limit:function(f)d=f;return c,page:function(f)e=f;return c;return c,pages:function()var c=findBySlug:function(d,f)var e=b+"/api/get_page/";e+="?slug="+d+"&callback=?";jQuery.getJSON(e,function(g)f(g.page));return c,categories:function()var c=all:function(e)var d=b+"/api/get_category_index/";d+="?callback=?";jQuery.getJSON(d,function(f)e(f.categories));return c,tags:function()var c=all:function(e)var d=b+"/api/get_tag_index/";d+="?callback=?";jQuery.getJSON(d,function(f)e(f.tags));return c,comments:function()var c=create:function(f,e)var d=b+"/api/submit_comment/";d+="?post_id="+f.postId+"&name="+f.name+"&email="+f.email+"&content="+f.content+"&callback=?";jQuery.getJSON(d,function(g)e(g));return c;return a;

var blog = WP.open('http://www.endofphotography.com/');

blog.posts().all(function(posts)
    for(var i = 0; i < posts.length; i++)
        jQuery('.'+MYWRAPPER_CLASS).append(function()
    return (posts[i].content) ? '<div class="lastpost_title" href="'+posts[i].url+'"><h4>'+posts[i].title+'</h4></div><div href="'+posts[i].url+'">'+posts[i].content+'<br>'+posts[i].date+'</div><br><hr><br>' : '<div href="'+posts[i].url+'"><h4>'+posts[i].date+'</h4></div>';
   );
  
);

我遇到了相反的问题，并试图禁用链接。特别是对于图像。我不希望用户在他们的手机上滚动并意外点击链接并将他们发送到应用程序之外。您可以通过在您的 Wordpress 管理员帐户中编辑帖子的 html 标记来控制这一点。我是手动完成的。

对于标题，作为一个临时解决方案，因为我不相信默认情况下使用 JSON API 可以点击它们，我会在 Wordpress 编辑器中手动执行类似的操作：

  <a href="#YourLink"><h4>Click here to read full article</h4></a>