对于所有链接，添加css以使用JS或PHP根据帖子类型切换链接的颜色-Wordpress

Question

我不确定从哪里开始，或者什么是我在这里想要完成的适当方法。 无论是在PHP中实现还是在JS中实现，都非常感谢您的帮助。

对于页面上找到的每个链接（可能在小部件，主题的模板页面，论坛等中找到） ，如何搜索并找出post_type，然后为该特定类型附加特定的链接颜色？

---

因此，例如：

有关侧边栏小部件中最新帖子的列表
（这是描述代码意图的最佳方法）：

For each post_type, dynamically set the following
'post'= color:black, 
'project' = color:dark blue,  
'topics' = color:dark green, 
and so on.

此外，如果在网站上其他任何地方都有指向另一篇文章的链接，例如在另一篇文章的正文内容或论坛主题中，则需要在该链接上附加一个类。 然后我的CSS可以像

.forum-post-link{color: #006400;}
.project-post-link{color: #00008B;}
.standard-post-link{color:#000;}

Answer 1

这是一个应该立即可用的解决方案。 您可能需要稍微调整选择器以避免主站点导航链接。

具有href的锚点<a>自动具有许多属性，例如与URL各个部分相关的hostname ， pathname ， origin等。 以下使用这些属性来隔离外部（不是相同域）的链接，并找到主页链接。

根据评论内容进行调整，使其适应现场站点应该相当容易，并且要扩展到涉及的3条主要路线之外。

/* set according to site domain */
var siteHost = "myurl.com";

var linkClasses = {
    /* adjust string values as classes to suit css rules, keys match term to look for in url */
    post: 'post',
    forum: 'forum',
    project: 'project'
}

$('a').each(function () {

    var host = this.hostname; /* returns domain.com */
    if (host !== siteHost) {
        return; /* not a local link, quit here */
    }
    var newClass = '';
    var path = this.pathname; /* returns eveything after http://myurl.com  */

    if (path && path !== '/') {
        /* we only want to look at first part of path*/
        var mainPath = path.split('/')[1];
        /* now check all the various terms in linkClasses object */ 
        $.each(linkClasses, function (key, value) {
            if (mainPath.indexOf(key) > -1) {
                newClass = linkClasses[key];
            }
        });

        $(this).addClass(newClass);
    } else {
        /* is home page link */
        $(this).addClass('home'); /* to test home page link finding ability */
    }
});

演示