对于所有的链接,添加css来切换颜色的链接基于Post类型使用JS或PHP - Wordpress


For all links, add css to switch color of link based off Post Type using JS or PHP - Wordpress

我不确定从哪条路线开始,也不知道什么是合适的方式来做我在这里想要完成的事情。无论是否可以在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;}

这里有一个现成的解决方案。你可能需要稍微调整一下选择器,以避免主站导航链接。

具有href的锚点<a>自动具有许多属性,如hostname, pathname, origin等,这些属性与url的各个部分相关。下面使用这些属性来隔离外部(非同一域)链接,并查找主页链接。

它应该是相当容易适应的基于评论的活网站,以及扩展超过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 */
    }
});
演示