Argon 主题修改记录
本文最后更新于 25 天前,如果内容失效欢迎留言告知。

动手前建议阅读WordPress 主题修改经验

文章过时信息显示

作者已更新此功能,可跳过。

计算发布日期,显示修改日期。如果间隔天数为0显示为今天,为1显示为昨天。

在模板函数(function.php)中1409行左右开始改为:

页脚文字增加版权、备案号

以下为PHP代码方式,也可以直接用主题自带的页脚HTML,可跳过。

主题页脚 (footer.php) 第5行改为:

<div><?php echo '© '.date('Y').' <a href="'.get_bloginfo('url').'">'.get_bloginfo('name').'</a>';if(get_option('zh_cn_l10n_icp_num')) {echo ' · '.'<a href="http://beian.miit.gov.cn" rel="external nofollow"  target="_blank">'.get_option('zh_cn_l10n_icp_num').'</a>'.' · ';}?>Theme <a href="https://github.com/solstice23/argon-theme">Argon</a><?php if (get_option('argon_hide_footer_author') != 'true') {echo " By solstice23"; }?></div>

HTML+JavaScript方式:

<p class="my-footer">© <a id="this-year"><a> <a href="/">鸦鸦的巢穴</a></p>
<p class="my-footer"><a href="http://beian.miit.gov.cn">浙ICP备20005259号</a></p>

<style>
#footer, .my-footer{
line-height: 0.8;
font-weight: normal;
}</style>

<script>
var my_data = new Date();
var my_year = document.getElementById("this-year");
my_year.innerHTML=my_data.getFullYear();
</script>

说说页面标题修改

PHP方式:修改说说页面模板 (shuoshuo.php) 12、19、20行。

JavaScript方式:页尾脚本添加以下代码。(推荐,一劳永逸)

<!--以下内容每次跳转新页面都执行,pjax额外处理--><script>
window.pjaxLoaded = function(){
	//说说标题替换为脑电波
	if($("#content > div.page-information-card-container > div > div").length > 0){
		var temp_str=document.querySelector("#content > div.page-information-card-container > div > div").innerHTML.replace(/说说/g,"脑电波");
		document.querySelector("#content > div.page-information-card-container > div > div").innerHTML=temp_str;
		$("#content > div.page-information-card-container > div > div > p > i").removeClass("fa fa-quote-left");
		$("#content > div.page-information-card-container > div > div > p > i").addClass("fa fa-lightbulb-o");
	}
}
window.pjaxLoaded();
</script>

公告栏名称修改

边栏 (sidebar.php)第6行。

<div class="leftbar-announcement-title text-white">一言</div>

如果需要文本居中:style="text-align:center"

调用一言API

作者已更新此功能,可跳过。

第一步:在模板函数 (functions.php) 添加Hitokoto()功能函数。此函数可写入子主题。

第二步:在需要显示的地方调用<?php echo Hitokoto(); ?>,比如边栏 (sidebar.php) 中的公告栏。

效果:

CSS 样式修改

修改内容见注释,其中文章背景卡片毛玻璃效果引起较明显卡顿,已弃用。

主题-自定义-额外CSS,添加以下内容:

折叠的代码

/*白天卡片背景透明*/
.card{
	background-color:rgba(255, 255, 255, 0.8) !important;
	/*backdrop-filter:blur(6px);*//*毛玻璃效果主要属性*/
	-webkit-backdrop-filter:blur(6px);
}

/*小工具栏背景完全透明*/
/*小工具栏是card的子元素,如果用同一个透明度会叠加变色,故改为完全透明*/
.card .widget,.darkmode .card .widget,#post_content > div > div > div.argon-timeline-card.card.bg-gradient-secondary.archive-timeline-title{
	background-color:#ffffff00 !important;
	backdrop-filter:none;
	-webkit-backdrop-filter:none;
}
.emotion-keyboard,#fabtn_blog_settings_popup{
	background-color:rgba(255, 255, 255, 0.95) !important;
}

/*左侧栏层级置于上层*/
#leftbar_part1 {
    z-index: 1;
}

/*分类卡片透明*/
.bg-gradient-secondary{
	background:rgba(255, 255, 255, 0.1) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter:blur(10px);
}

/*夜间透明*/
html.darkmode.bg-white,html.darkmode .card,html.darkmode #footer{
	background:rgba(66, 66, 66, 0.9) !important;
}
html.darkmode #fabtn_blog_settings_popup{
	background:rgba(66, 66, 66, 0.95) !important;
}

/*标签背景
.post-meta-detail-tag {
	background:rgba(255, 255, 255, 0.5)!important;
}*/

/*分类卡片文本居中*/
#content > div.page-information-card-container > div > div{
	text-align:center;
}

/*子菜单对齐及样式调整*/
.dropdown-menu .dropdown-item>i{
    width: 10px;
}
.dropdown-menu>a {
	color:var(--themecolor);
}
.dropdown-menu{
	min-width:max-content;
}
.dropdown-menu .dropdown-item {
	padding: .5rem 1.5rem 0.5rem 1rem;
}
.leftbar-menu-subitem{
	min-width:max-content;
}
.leftbar-menu-subitem .leftbar-menu-item>a{
	padding: 0rem 1.5rem 0rem 1rem;
}

/*左侧菜单栏突出颜色修改*/
.leftbar-menu-item > a:hover, .leftbar-menu-item.current > a{
	background-color: #f9f9f980;
}

/*站点概览分隔线颜色修改*/
.site-state-item{
	border-left: 1px solid #aaa;
}
.site-friend-links-title {
	border-top: 1px dotted #aaa;
}
#leftbar_tab_tools ul li {
    padding-top: 3px;
    padding-bottom: 3px;
    border-bottom:none;
}
html.darkmode #leftbar_tab_tools ul li {
    border-bottom:none;
}

/*左侧栏边距修改*/
.tab-content{
	padding:10px 0px 0px 0px !important;
}
.site-author-links{
	padding:0px 0px 0px 10px ;
}
/*目录位置偏移修改*/
#leftbar_catalog{
	margin-left: 0px;
}
/*目录条目边距修改*/
#leftbar_catalog .index-link{
	padding: 4px 4px 4px 4px;
}
/*左侧栏小工具栏字体缩小*/
#leftbar_tab_tools{
	font-size: 14px;
}

/*正文图片边距修改*/
article figure {margin:0;}
/*正文表格样式修改*/
article table > tbody > tr > td,
article table > tbody > tr > th,
article table > tfoot > tr > td,
article table > tfoot > tr > th,
article table > thead > tr > td,
article table > thead > tr > th{
	padding: 8px 10px;
	border: 1px solid;
}
/*表格居中样式*/
.wp-block-table.aligncenter{margin:10px auto;}

/*特色图片文章标题*/
.post-header.post-header-with-thumbnail .post-header-text-container .post-title {
	font-weight:bold;
	color:#ffffff !important;
	text-shadow: 0px 0px 5px #000000 !important;
}

/*鼠标样式修改*/
body{cursor: url(https://crowya.com/wp-content/uploads/2020/04/basicimg-mouse32.ico),auto;}

.my-hide{
	display:none !important;
}
.zero-margin-bottom{
	margin-bottom:0 !important;
}

/*首页说说左上角图标修改*/
.shuoshuo-preview-container:before{
	background-size: 50%;
	background-position: 50% 45%;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMTIwIDU3NnEwIDEzLTkuNSAyMi41dC0yMi41IDkuNS0yMi41LTkuNS05LjUtMjIuNXEwLTQ2LTU0LTcxdC0xMDYtMjVxLTEzIDAtMjIuNS05LjV0LTkuNS0yMi41IDkuNS0yMi41IDIyLjUtOS41cTUwIDAgOTkuNSAxNnQ4NyA1NCAzNy41IDkwem0xNjAgMHEwLTcyLTM0LjUtMTM0dC05MC0xMDEuNS0xMjMtNjItMTM2LjUtMjIuNS0xMzYuNSAyMi41LTEyMyA2Mi05MCAxMDEuNS0zNC41IDEzNHEwIDEwMSA2OCAxODAgMTAgMTEgMzAuNSAzM3QzMC41IDMzcTEyOCAxNTMgMTQxIDI5OGgyMjhxMTMtMTQ1IDE0MS0yOTggMTAtMTEgMzAuNS0zM3QzMC41LTMzcTY4LTc5IDY4LTE4MHptMTI4IDBxMCAxNTUtMTAzIDI2OC00NSA0OS03NC41IDg3dC01OS41IDk1LjUtMzQgMTA3LjVxNDcgMjggNDcgODIgMCAzNy0yNSA2NCAyNSAyNyAyNSA2NCAwIDUyLTQ1IDgxIDEzIDIzIDEzIDQ3IDAgNDYtMzEuNSA3MXQtNzcuNSAyNXEtMjAgNDQtNjAgNzB0LTg3IDI2LTg3LTI2LTYwLTcwcS00NiAwLTc3LjUtMjV0LTMxLjUtNzFxMC0yNCAxMy00Ny00NS0yOS00NS04MSAwLTM3IDI1LTY0LTI1LTI3LTI1LTY0IDAtNTQgNDctODItNC01MC0zNC0xMDcuNXQtNTkuNS05NS41LTc0LjUtODdxLTEwMy0xMTMtMTAzLTI2OCAwLTk5IDQ0LjUtMTg0LjV0MTE3LTE0MiAxNjQtODkgMTg2LjUtMzIuNSAxODYuNSAzMi41IDE2NCA4OSAxMTcgMTQyIDQ0LjUgMTg0LjV6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
}
.shuoshuo-preview-container:hover:before {
	background-position: 50% 50%;
	background-size: 60%;
}

/*回顶图标放大*/
button#fabtn_back_to_top, button#fabtn_go_to_comment, button#fabtn_toggle_blog_settings_popup, button#fabtn_toggle_sides, button#fabtn_open_sidebar{
	font-size: 1.2rem;
}

/*顶栏菜单放大*/
.navbar-nav .nav-link {
	font-size: 1rem;
}
.navbar-brand {
	font-family: 'Noto Serif SC',serif;
	font-size: 1.25rem;
	margin-right: 2rem;
	padding-bottom: .2rem;
}
.navbar-nav .nav-item {
	margin-right:0;
}
.mr-lg-5, .mx-lg-5 {
	margin-right:1rem !important;
}
.navbar-toggler-icon {
	width: 1.5rem;
	height: 1.5rem;
}
.navbar-expand-lg .navbar-nav .nav-link {
	padding-right: 0.9rem;
	padding-left: 1rem;
}

其中鼠标样式貌似只支持格式为.ico的图片。

关于毛玻璃效果再说一下,背景卡片的毛玻璃效果虽然很好看,但对比之下真的有肉眼可见的卡顿,但是只弄一个导航栏毛玻璃效果的话速度还是可以的。主要可能是由于文章背景卡片在页面滑动过程中对模糊效果的实时计算量比较大,而这个计算是由客户端浏览器完成的,用户体验就比较卡……

虽然最终代码就这么点,但是为了找出这些CSS可谓是殚精竭虑……
具体历程参见《不要再傻乎乎地通过主题编辑器style.css修改主题样式了》。

顶部导航栏毛玻璃效果

方法一:在不启用jsdellvr的CDN的前提下,修改argontheme.js,大约24行。

方法二:依然启用CDN,在页头或页尾脚本中重定义函数。因为JavaScript允许重复定义函数,后定义的同名函数覆盖之前的。(推荐)

主要用到backdrop-filter:blur(10px);属性。

/*根据滚动高度改变顶栏透明度*/
!function(){
	let toolbar = document.getElementById("navbar-main");
	let $bannerContainer = $("#banner_container");
	let $content = $("#content");

	let startTransitionHeight;
	let endTransitionHeight;

	startTransitionHeight = $bannerContainer.offset().top - 75;
	endTransitionHeight = $content.offset().top - 75;

	$(window).resize(function(){
		startTransitionHeight = $bannerContainer.offset().top - 75;
		endTransitionHeight = $content.offset().top - 75;
	});

	function changeToolbarTransparency(){
		let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
		if (scrollTop < startTransitionHeight){
			toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), 0)', 'important');
			toolbar.style.setProperty('box-shadow', 'none');
			toolbar.style.setProperty('-webkit-box-shadow', 'none');
			toolbar.style.setProperty('backdrop-filter', '');
			toolbar.style.setProperty('-webkit-backdrop-filter', '');
			toolbar.classList.add("navbar-ontop");
			return;
		}
		if (scrollTop > endTransitionHeight){
			toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), 0.6)', 'important');
			toolbar.style.setProperty('box-shadow', '0 0.3125rem 0.3125rem -0.3125rem rgba(0, 0, 0, 0.117)');
			toolbar.style.setProperty('-webkit-box-shadow', '0 0.3125rem 0.3125rem -0.3125rem rgba(0, 0, 0, 0.117)');
			toolbar.style.setProperty('backdrop-filter', 'blur(20px)');
			toolbar.style.setProperty('-webkit-backdrop-filter', 'blur(20px)');
			toolbar.classList.remove("navbar-ontop");
			return;
		}
		let transparency = (scrollTop - startTransitionHeight) / (endTransitionHeight - startTransitionHeight) * 0.85;
		toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), ' + transparency, 'important');
		toolbar.style.setProperty('box-shadow', '');
		toolbar.classList.remove("navbar-ontop");
	}
	changeToolbarTransparency();
	document.addEventListener("scroll", changeToolbarTransparency, {passive: true});
}();

自建时间轴页面

作者已更新此功能,可跳过。

主题目录下新建timeline.php。此页面可写入子主题。

左侧栏-站点概览-点击文章跳转到时间轴

方法一:修改PHP,边栏(sidebar.php)大约128行。

原始代码:

<a style="cursor: default;"> //保持光标不变,鼠标碰到超链接不会变成小手

改为:

<a href="https://crowya.com/time">

方法二:JavaScript方式,页尾脚本添加以下代码。(推荐,一劳永逸)

<!--站点概览点击文章跳转到时间轴--><script>
window.pjaxLoaded = function(){
	document.querySelector("#leftbar_tab_overview > nav > div.site-state-item.site-state-posts > a").removeAttribute("style");
	document.querySelector("#leftbar_tab_overview > nav > div.site-state-item.site-state-posts > a").setAttribute("href","/time");
}
window.pjaxLoaded();
</script>

左侧栏-站点概览-点击头像或作者名跳转到关于页

这里只介绍JavaScript方式,和前面类似,页尾脚本添加以下代码。

$("#leftbar_overview_author_image").wrapAll('<a href="/about" /a>');
$("#leftbar_overview_author_name").wrapAll('<a href="/about" /a>');

小窗口模式下左上角按钮打开左侧栏

方法一:主题页眉 (header.php) 225行左右改为:

<button id="fabtn_open_sidebar" class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navbar_global" aria-expanded="false" aria-label="Toggle navigation">

方法二:JavaScript方式,页尾脚本添加以下代码。(推荐,一劳永逸)

<script>
//小窗口模式下左上角按钮打开左侧栏
document.querySelector("#navbar-main > div > button").removeAttribute("data-target");
document.querySelector("#navbar-main > div > button").setAttribute("id","fabtn_open_sidebar");
</script>

回到顶部图标修改

PHP方式:主题页眉 (header.php) 457行左右 fa fa-angle-up 改为 fa fa-arrow-up

JavaScript方式:页尾脚本添加以下内容。(推荐,一劳永逸)

<!--回顶图标修改--><script>
$("#fabtn_back_to_top > span > i").removeClass("fa fa-angle-up");
$("#fabtn_back_to_top > span > i").addClass("fa fa-arrow-up");
</script>

博客宠物及其功能修改

  1. 养一只博客宠物
  2. Live2D 宠物功能修改|音乐播放器+右键秘密通道

参考资料

  1. WordPress 主题修改经验
  2. WordPress 子主题能干什么以及不能干什么
  3. 不要再傻乎乎地通过主题编辑器 style.css 修改主题样式了
  4. 浏览器开发者工具轻度使用指南

小提示:您可以通过 RSS 订阅本站文章更新,订阅地址:https://crowya.com/feed。什么是 RSS ?

评论

  1. 哈哈哈
    Android Chrome
    6月前
    2020-11-27 15:48:54

    来学习学习

  2. 梦瑾
    Windows Firefox
    8月前
    2020-9-11 12:09:06

    新手来学习了

  3. zhangqiling
    Windows Chrome
    9月前
    2020-8-28 18:08:05

    新手站长学习中

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇