作者： 清朝云

前言

之前写过一篇追剧页面的function代码，现在给大家推荐一个可以添加书单,观影页面的插件。

教程

首先上传插件文件，然后到插件的设置页面填写豆瓣的ID和申请的KEY。

记得申请KEY的时候需要填写应用简介，请用英文不要用中文，否则会提示需要你告知他们将会如何使用API。

设置的时候静态文件和开启分类不要勾选，否则可能不会显示（至少我的是这样的，目前不知道是什么原因）

链接地址

具体的教程地址：https://fatesinger.com/101050

项目开源地址：https://github.com/bigfa/wp-douban

下载地址：https://github.com/bigfa/wp-douban/releases/tag/v4.4.3

前言

看到他们不少人为WordPress添加了问候语，但是都是显示在页面的顶部，我觉得容易遮挡其他元素和存在时间很短，于是改了代码，让其显示在页面右下角并且显示五秒

代码

将代码放到主题后台的自定义代码中的页脚代码内即可。

<!--首页问候-->
<div id="greetingBox"></div>
<style>
    #greetingBox {
        position: fixed;
        bottom: 10px;
        right: 15px;
        width: 400px;
        text-align: right;
        z-index: 10000;
        pointer-events: none
    }

    #greeting {
        display: inline-block;
        position: relative;
        opacity: 0;
        bottom: -110px;
        padding: 5px 40px;
        border-radius: 50px;
        background-color: #fff;
        color: #000;
        font-size: small;
        transition: .5s;
        box-shadow: rgb(0 0 0 / 5%) 0 10px 20px
    }

    #greeting.shown {
        opacity: 1;
        bottom: 0
    }
</style>
<script>
    (() => {
    const greeting = [
        {
            realNode: {
                greeting: "您好,今天过得怎么样?",
                start_time: 0,
                end_time: 11
            }
        },
        {
            realNode: {
                greeting: "中午好👋, 记得好好吃午饭哦",
                start_time: 11,
                end_time: 13
            }
        },
        {
            realNode: {
                greeting: "下午好👋, 希望你下午工作顺利",
                start_time: 13,
                end_time: 18
            }
        },
        {
            realNode: {
                greeting: "晚上好👋, 在属于自己的时间好好放松😌~",
                start_time: 18,
                end_time: 24
            }
        }
    ];

    let e = greeting.length !== 0 ? greeting : [
        // 默认问候语数组
    ];

    let t = document.createElement("div");
    t.id = "greeting";
    setTimeout(() => {
        t.classList.add("shown");
    }, 1000);

    let i = document.querySelector("#greetingBox");
    i.appendChild(t);

    const n = new Date().getHours();
    let r = "";
    for (let t = 0; t < e.length; t++) {
        if (n >= e[t].realNode.start_time && n < e[t].realNode.end_time) {
            r = e[t].realNode.greeting;
            break;
        }
    }
    t.innerHTML = r;
    setTimeout(() => {
        t.classList.remove("shown");
        setTimeout(() => {
            i.remove();
        }, 500);
    }, 5000);
})();
</script>

前言

用WordPress搭建网站的站长都知道，WordPress自带的搜索路径为?s= ，这就导致搜索结果出来的时候会包含页面而不是只有文章内容，所以今天教大家如何让搜索结果屏蔽所有页面内容。

教程

我用的是CoreNext主题自带有子主题，如果没有子主题的要慎重修改。

将如下代码加到function.php 中即可

function search_filter_page($query) {
    if ($query->is_search) {
        $query->set('post_type', 'post');
    }
    return $query;
 }
add_filter('pre_get_posts','search_filter_page');

测试

加代码之前的效果：

加代码之后的效果：

前言

闲着无聊想弄个自助申请友链的功能，这样就不弄在评论区慢慢输入网站标题等文字了。

教程

因为我是登录才能评论所以以下代码只适用登录后才能评论。

1.首先在子主题的function.php 中添加如下代码。

function display_friendlink_form() {
    ob_start();
    ?>
    <style>
        #friendlink-form label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        #friendlink-form input[type="text"],
        #friendlink-form input[type="url"] {
            width: 20%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        #friendlink-form button[type="submit"] {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        #friendlink-form button[type="submit"]:hover {
            background-color: #45a049;
        }

        #friendlink-notification {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #4CAF50;
            color: #fff;
            padding: 10px;
            border-radius: 4px;
            display: none;
            z-index: 9999;
        }
    </style>

    <form id="friendlink-form" method="post">
        <div>
            <label for="website-name">网站名称：<input type="text" name="website-name" id="website-name" required></label>
        </div>
        <div>
            <label for="website-description">网站描述：<input type="text" name="website-description" id="website-description" required></label>
        </div>
        <div>
            <label for="website-url">网站地址：<input type="url" name="website-url" id="website-url" required></label>
        </div>
        <div>
            <label for="website-icon">网站图标：<input type="url" name="website-icon" id="website-icon" required></label>
        </div>
        <button type="submit" id="submit-friendlink" disabled>提交</button>
    </form>

    <div id="friendlink-notification"></div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var submitButton = document.getElementById('submit-friendlink');
            var websiteNameInput = document.getElementById('website-name');
            var websiteDescriptionInput = document.getElementById('website-description');
            var websiteUrlInput = document.getElementById('website-url');
            var websiteIconInput = document.getElementById('website-icon');

            function validateForm() {
                if (websiteNameInput.value.trim() !== '' &&
                    websiteDescriptionInput.value.trim() !== '' &&
                    websiteUrlInput.value.trim() !== '' &&
                    websiteIconInput.value.trim() !== '') {
                    submitButton.disabled = false;
                } else {
                    submitButton.disabled = true;
                }
            }

            websiteNameInput.addEventListener('input', validateForm);
            websiteDescriptionInput.addEventListener('input', validateForm);
            websiteUrlInput.addEventListener('input', validateForm);
            websiteIconInput.addEventListener('input', validateForm);

            document.getElementById('friendlink-form').addEventListener('submit', function(event) {
                event.preventDefault();

                var websiteName = websiteNameInput.value;
                var websiteDescription = websiteDescriptionInput.value;
                var websiteUrl = websiteUrlInput.value;
                var websiteIcon = websiteIconInput.value;

                var commentContent = '网站名称：' + websiteName + 'nn' +
                                     '网站描述：' + websiteDescription + 'nn' +
                                     '网站地址：' + websiteUrl + 'nn' +
                                     '网站图标：' + websiteIcon;

                var commentData = {
                    action: 'submit_friendlink',
                    websiteName: websiteName,
                    websiteDescription: websiteDescription,
                    websiteUrl: websiteUrl,
                    websiteIcon: websiteIcon,
                    post_id: <?php echo get_the_ID(); ?>,
                    user_id: <?php echo get_current_user_id(); ?>,
                };

                var xhr = new XMLHttpRequest();
                xhr.open('POST', '<?php echo admin_url('admin-ajax.php'); ?>', true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.onload = function() {
                    if (xhr.status === 200) {
                        var response = JSON.parse(xhr.responseText);
                        if (response.success) {
                            location.reload(); // 手动刷新页面
                        } else {
                            showNotification('你尚未登录请登录后重试。');
                        }
                    } else {
                        showNotification('你尚未登录请登录后重试。');
                    }
                };
                xhr.send(Object.keys(commentData).map(function(key) {
                    return encodeURIComponent(key) + '=' + encodeURIComponent(commentData[key]);
                }).join('&'));
            });
        });

        function showNotification(message) {
            var notification = document.getElementById('friendlink-notification');
            notification.textContent = message;
            notification.style.display = 'block';
            setTimeout(function() {
                notification.style.display = 'none';
            }, 2000);
        }
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('friendlink_form_new', 'display_friendlink_form');

function submit_friendlink_callback() {
    if (is_user_logged_in()) {
        $websiteName = $_POST['websiteName'];
        $websiteDescription = $_POST['websiteDescription'];
        $websiteUrl = $_POST['websiteUrl'];
        $websiteIcon = $_POST['websiteIcon'];
        $postID = $_POST['post_id'];
        $userID = $_POST['user_id'];

        if (empty($websiteName) || empty($websiteDescription) || empty($websiteUrl) || empty($websiteIcon)) {
            echo json_encode(array('success' => false));
            wp_die();
        }

        $commentData = array(
            'comment_post_ID' => $postID,
            'comment_author' => get_userdata($userID)->display_name,
            'comment_content' => "网站名称：$websiteNamenn网站描述：$websiteDescriptionnn网站地址：$websiteUrlnn网站图标：$websiteIcon",
            'comment_type' => '',
            'comment_parent' => 0,
            'user_ID' => $userID,
        );

        $commentID = wp_new_comment($commentData);
        if ($commentID) {
            echo json_encode(array('success' => true));
        } else {
            echo json_encode(array('success' => false));
        }
    } else {
        echo json_encode(array('success' => false));
    }

    wp_die();
}
add_action('wp_ajax_submit_friendlink', 'submit_friendlink_callback');
add_action('wp_ajax_nopriv_submit_friendlink', 'submit_friendlink_callback');

2.在友链页面合适的地方添加[friendlink_form_new] 短代码。

前言

在某个网站看到鼠标放到首页文章,它的底部会出现线条,于是就突发奇想想给自己网站弄一个

效果

别人的：

自己的：

教程

请将如下两个代码中的任何一个添加到子主题的CSS文件夹中的main.css 中或在主题设置中添加自定义css代码

1.固定颜色

.post-item {
  position: relative;
}

.post-item::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--color, #000);
  transition: width 1s, background-color 0.5s; /* 添加了背景颜色的过渡效果 */
}

.post-item:hover::before {
  width: 100%;
}

/* 使用计算来设置颜色 */
.post-item:nth-of-type(1)::before {
  --color: hsl(0, 100%, 50%); /* 设置第一个.post-item的线条颜色 */
}

.post-item:nth-of-type(2)::before {
  --color: hsl(72, 100%, 50%); /* 设置第二个.post-item的线条颜色 */
}

.post-item:nth-of-type(3)::before {
  --color: hsl(144, 100%, 50%); /* 设置第三个.post-item的线条颜色 */
}

.post-item:nth-of-type(4)::before {
  --color: hsl(216, 100%, 50%); /* 设置第四个.post-item的线条颜色 */
}

.post-item:nth-of-type(5)::before {
  --color: hsl(288, 100%, 50%); /* 设置第五个.post-item的线条颜色 */
}

.post-item:nth-of-type(6)::before {
  --color: hsl(324, 100%, 50%); /* 设置第六个.post-item的线条颜色 */
}

.post-item:nth-of-type(7)::before {
  --color: hsl(36, 100%, 50%); /* 设置第七个.post-item的线条颜色 */
}

.post-item:nth-of-type(8)::before {
  --color: hsl(108, 100%, 50%); /* 设置第八个.post-item的线条颜色 */
}

.post-item:nth-of-type(9)::before {
  --color: hsl(180, 100%, 50%); /* 设置第九个.post-item的线条颜色 */
}

.post-item:nth-of-type(10)::before {
  --color: hsl(252, 100%, 50%); /* 设置第十个.post-item的线条颜色 */
}

2.动态颜色

.post-item {
  position: relative;
}

.post-item::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--color, #000);
  transition: width 1s;
}

.post-item:hover::before {
  width: 100%;
}

.post-item:hover::before {
  animation: randomColor 2s infinite;
}

@keyframes randomColor {
  0% {
    background: red;
  }
  25% {
    background: blue;
  }
  50% {
    background: green;
  }
  75% {
    background: yellow;
  }
  100% {
    background: purple;
  }
}