WordPress首页调用memos方法!

Auth:老张       Date:2024/10/22       Cat:电脑网络       Word:共6650字

◷2024/10/22   👁浏览:612   🗨53条评论
文章目录 「隐藏」
  1. 最新动态

WordPress首页调用memos方法! - 第1张图片

老张一直想把wordpress和memos能整合在一起,前几天在段先生的博客上看到了教程,便死皮赖脸的问他方法,原来是AI搞定的。刚开始的时候是直接拿段先生的用,但是里面有一些达不到自己想要的效果。比如段先生是从memos的RSS文件里取数但,如果memo里有多篇图片的话,RSS只能输出一张链接地址,其他找不到。通过找木木大佬,用了他提供的《Memos API 非官方不完全说明》便可以解决。另外在CSS布局上也不是自己想要的效果,便想着自己也来让AI搞吧!

让AI帮你写代码,你必须要学会怎么样能更好的和AI对话,必须要有一点点的代码基础,才能把把问题问在点子上。我在把memos的API输出的数据模式先告诉AI,然后再提出自己的要求,要求如下:

我想在wordpress获取memos的api发布第一条动态内容,API的链接地址是https://zhangbo.net/api/v1/memo?creatorId=1&rowStatus=NORMAL&limit=1 ,内容格式如下:
按以下要求进行操作:
1.读取第一个"id"后面的数据,并形成“https://zhangbo.net/m/+“id后面的数据”” 做为链接,赋值给变量$link_content
2.读取"content"后面的数据,读取以#号开始、空格结束的内容,并在前面加#号后赋值给变量$tag_content。
3.读取"createdTs"后面的数值,转化为时间后与当前时间计算时间间隔。时间间隔为1小时内的,以时间间隔+“分钟前”赋值给$time_content;时间间隔为24小时内的,以时间间隔+“小时前”赋值给$time_content;时间间隔为30天内的,以时间间隔+“天之前”赋值给$time_content;时间间隔超过30天的,直接以“年月日”形式赋值给$time_content。
4.读取"content"后面的数据,排除“![]()”图片形式、排除#、#及空格前的内容后,赋值给$content。
5.读取"content"后面的数据,如果有“![]()”图片形式,将()内的图片链接赋值给$image_content;如果"externalLink": 后面有数据,赋值给$image_content;如果"filename"后面有数据,将以“https://zhangbo.net/o/r/+filename上第四行ID后的数值+"filename"的数据”赋值给$image_content。如果以上情况都存在,那将以数值组形式赋值。
以上生成的代码,将保存在wordpress的主题文件functions.php中以便调用。
按以下要求生成CSS代码
1.对于在首页展示的要求,在首页文章列表上方,与首页文章空两行
2.显示框宽度100%、背景灰色、四角椭圆。
3.第一个DIV展示框以"h2”格式展示“最新动态”四个字、靠左对齐、左边距空20px;务必同一行展示$time_content值,右居中对齐,右边距空20PX
4.第二DIV插入细实线、深灰色
5.第三DIV展示$content值
5.第四DIV展示$image_content值的缩略图,缩略图四角椭圆并有阴影,如果多图从左往右排列。并按确保引入 Lightbox.js,也写入到本代码中,达到点击放大效果
6.第五DIV靠左对齐展示$tag_content值,背景灰色并四角椭圆,靠右展示“点击评价”点击链接到$link_content。
再生成输出代码以便插入在首页文件index.php,以便在首页显示。/

我分别测试了官方GPT、三方GPT和豆包,结果是官方GPT直接来句“问题太复杂,请分类进行提问”,三方GPT给出的代码效果完全不对,而豆包给出的代码基本上达到要求。当然,还是由于自己的表述,导致代码在图片显示这块有些问题。今天中午利用几分钟时间,进行了修改,对获取图片链接地址重新让AI写,我是这样提问的:

我现在的要求是其他代码不需修改,只对获取图片链接重新按以下要求来修改
1.读取"content"后面的数据,如果有“![]()”图片形式,将()内的图片链接赋值给$image_content;
2.获取  "resourceList": []的中括号里数据,这是图片组,每组以{}进行区分,查询每个{}内的"externalLink",如果"externalLink": 后面有数据,赋值给$image_content;如果"externalLink"无数据,则以“https://zhangbo.net/o/r/+该图片id+"filename"的数据”赋值给$image_content。
如果以上情况都存在,那将以数值组形式赋值。

经过这样的修改,图片才得要正确显示。后来又陆陆续续的修改了CSS样式,最终达到目前的效果。

现在把相关代码贴给大家吧,需要的自取,不合自己要求的,也可以让AI帮你来修改。

1.把下面的代码插入到主题文件的index.php合适位置。

 <?php
$memoOutput = processMemoData();
if ($memoOutput) {
echo $memoOutput;
}
?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox-plus-jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css">/* Your code... */

2.把CSS样式代码放置到主题CSS定义设置里,当然也可以直接放到style.css中。


/* 首页调用memos效果---开始 */
/* 缩小与顶部距离,增加与首页文章列表距离 */
.memo-display {
    margin-top: 0px; /* 减少与顶部的距离 */
    margin-bottom: 40px; /* 增加与文章列表的距离 */
    margin-right: 40px; /* 设置右边距为20px */
    width: calc(100% - 40px); /* 计算宽度以适应右边距 */
    background-color: #f2f2f2;
    border-radius: 10px;
    padding: 20px;
    border: 1px solid #ccc; /* 添加细线边框,颜色为浅灰色 */
}


/* 第一个 DIV:展示“最新动态”和时间 */
.memo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.memo-header h2 {
    margin-left: 0px;
}

.memo-header span {
    margin-right: 0px;
}

/* 第二 DIV:插入细实线、深灰色 */
.memo-divider {
    border-top: 1px solid #999;
    margin: 10px 0;
}

/* 第三 DIV:展示内容 */
.memo-content {
    margin-bottom: 10px;
    line-height: 1.5; /* 或者可以使用具体的像素值,如 1.5em 或 24px */
}
/* 第四 DIV:展示缩略图 */
.memo-images {
    display: flex;
    flex-wrap: wrap;
}

.memo-images img {
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    margin-right: 10px;
    cursor: pointer;
    transition: transform 0.3s ease; /* 添加过渡效果 */
}

.memo-images img:hover {
    transform: scale(1.1); /* 鼠标悬浮时放大 */
}

/* 第五 DIV:展示标签和链接 */
.memo-footer {
    display: flex;
    align-items: center;
    margin-top: 10px; /* 设置与上面容器的距离为 30px */
}

.memo-footer div:first-child {
    background-color: #9999;
    border-radius: 6px;
    padding: 5px 10px;
    margin-right: 10px;
}

.memo-footer a {
    text-decoration: none;
    margin-left: auto; /* 靠右对齐 */
    margin-right: 0px; /* 右边距 20px */
}
/* 首页调用memos效果---结束 */

3.把下面代码插入到主题functions.php文件中。

/* Your code... */
//-------首页调用memoe代码-----开始
function getTimeContent($createdTs) {
    $current_time = time();
    $time_diff = $current_time - $createdTs;
    static $cachedTimeContent = null;
    static $lastCreatedTs = null;
    if ($lastCreatedTs === $createdTs) {
        return $cachedTimeContent;
    }
    if ($time_diff < 60 * 60) {
        $time_content = floor($time_diff / 60). '分钟前';
    } elseif ($time_diff < 24 * 60 * 60) {
        $time_content = floor($time_diff / (60 * 60)). '小时前';
    } elseif ($time_diff < 30 * 24 * 60 * 60) {
        $time_content = floor($time_diff / (24 * 60 * 60)). '天之前';
    } else {
        $date = date('Y-m-d', $createdTs);
        $time_content = $date;
    }
    $cachedTimeContent = $time_content;
    $lastCreatedTs = $createdTs;
    return $time_content;
}

function processMemoData() {
    $api_url = 'https://zhangbo.net/api/v1/memo?creatorId=1&rowStatus=NORMAL&limit=1';
    $cached_data = get_transient('memo_data');
    if ($cached_data === false) {
        $response = wp_remote_get($api_url);
        if (!is_wp_error($response)) {
            $body = wp_remote_retrieve_body($response);
            $data = json_decode($body, true);
            set_transient('memo_data', $data, 60 * 5); // 缓存 5 分钟
        } else {
            return;
        }
    } else {
        $data = $cached_data;
    }
    if (empty($data)) {
        return;
    }
    $memo = $data[0];
    $id = $memo['id'];
    $link_content = 'https://zhangbo.net/m/'. $id;
    $content = $memo['content'];
    preg_match('/#([^ ]*)/', $content, $matches);
    $tag_content = isset($matches[1])? '#'. $matches[1] : '';
    $createdTs = $memo['createdTs'];

    // 处理时间差
    $time_content = getTimeContent($createdTs);

    // 检查内容中的图片链接
    preg_match_all('/!\[.*?\]\((.*?)\)/', $content, $image_matches);
    $image_content = [];
    $has_external_link = false; 

    // 检查内容中的图片链接并添加到 $image_content
    if (!empty($image_matches[1])) {
        $image_content = array_merge($image_content, $image_matches[1]);
    }

    // 检查 resourceList 中的 externalLink
    if (!empty($memo['resourceList'])) {
        foreach ($memo['resourceList'] as $resource) {
            if (!empty($resource['externalLink']) && filter_var($resource['externalLink'], FILTER_VALIDATE_URL) && preg_match('/\.(jpg|jpeg|png|gif|bmp|webp)$/i', $resource['externalLink'])) {
                $image_content[] = $resource['externalLink'];
                $has_external_link = true; 
            } elseif (!empty($resource['filename'])) {
                $resource_id = $resource['id'];
                $image_content[] = 'https://zhangbo.net/o/r/'. $resource_id. '/'. $resource['filename'];
            }
        }
    }

    // 判断内容长度并进行处理
    if (mb_strlen($content, 'UTF-8') > 100) {
        $substr_content = mb_substr($content, 0, 100, 'UTF-8');
        $last_char = mb_substr($substr_content, -1, 1, 'UTF-8');
        $last_char_ascii = ord($last_char);
        while ($last_char_ascii < 32 || $last_char_ascii > 126) {
            $substr_content = mb_substr($substr_content, 0, -1, 'UTF-8');
            $last_char = mb_substr($substr_content, -1, 1, 'UTF-8');
            $last_char_ascii = ord($last_char);
        }
        $content = $substr_content. '......';
        $link_text = '查看原文';
    } else {
        $link_text = '点击评价';
    }

    $content_without_tags_and_images = preg_replace('/#.*? /', '', $content);
    $content_without_tags_and_images = preg_replace('/!\[.*?\]\(.*?\)/', '', $content_without_tags_and_images);
    $content = $content_without_tags_and_images;

    // 构建输出内容
    $output = '
'; $header = '

最新动态

'. $time_content. '
'; $divider = '
'; $contentDiv = '
'. $content. '
'; $imagesDiv = ''; if (!empty($image_content)) { $imagesDiv = '
'; foreach ($image_content as $image_link) { $imagesDiv.= 'Image'; } $imagesDiv.= '
'; } $footer = ''; $output.= $header. $divider. $contentDiv. $imagesDiv. $footer; $output.= '
'; return $output; }

OK,结束!折腾十几个小时,就是出了这篇教程!!

《WordPress首页调用memos方法!》留言数:53

      1. 老张博客-沉沦沉沦

        @老张: 能让 AI 帮忙也得需要技术…都不知道咋问。我也就能让 chatgpt 帮着写写工作报告之类。。。能把整个主题丢给 AI 想改啥或添加啥功能直接说就好了,哈哈!

        1. 老张博客-大致大致LV2

          @阿杰 Jack: 控制好css的话,其实是一样的。他这边加在div id=”primary”里面,如果在header.php里的话,就只能放在header的后面,primary外面,另外建一个div。

  1. 老张博客-满心满心LV1

    不错不错,wordpress我当备用站了,总感觉多刷几次会把cpu跑满,不知道是主题原因还是其它的什么原因,以前用子比的时候,也爱魔改折腾

    15楼 回复
  2. 老张博客-w4j1ew4j1eLV2

    chatgpt 居然还会这样回复,我以前要 AI 写代码是一步一步来的,结果随着需求增加它的代码也更混乱了 0.0

    22楼 回复

发表留言