显示标签为“链接”的博文。显示所有博文
显示标签为“链接”的博文。显示所有博文

2022年11月8日星期二

WordPress制作链接页面(网址导航/收藏)的步骤

我也不知道怎么描述这个功能,简单来说就是制作一个纯链接的页面,这个页面分类显示网站的链接,具体效果可以在这里查看https://www.jfsay.com/links

我把需要经常访问的网站聚合在一个页面里,设置为手机浏览器的主页,这样可以方便地访问,不用依赖于浏览器自带的同步功能,这样即使更换浏览器也不影响我使用了。

制作方法如下:

1、将links.php放到主题的目录下

2、后台-页面-新建页面

3、填写标题,内容为空,模板选择Links

这样就可以得到一个显示网址链接的页面了。

网址书签(收藏夹)主页开发小记DIV添加超链接小记里描述了代码实现的过程,当时是依托于主题样式写的,更换主题又要重新调整,这次稍微修改了代码,把CSS样式直接写在一起,现在是主题无关的,拿下来直接就可以用了。

links.php的代码如下

<?php/*Template Name: Links*/?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head profile="http://gmpg.org/xfn/11">	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />	<meta http-equiv="Cache-Control" content="no-transform" />	<meta http-equiv="Cache-Control" content="no-siteapp" />	<title>LINKS</title>	<!-- style START -->	<!-- default style -->	<style type="text/css" media="screen">		.boxcaption {	background:#E3E4E6;	padding:1px 18px;	border-bottom:1px solid #CCC;	}	.boxcaption h3 {	font-size:12px;		font-family:Verdana,"BitStream vera Sans",Tahoma,Helvetica,Sans-serif;	letter-spacing:0em;	}		.post .content .linkcat ul{		margin:5px 0;padding: 0;		}	.post .content .linkcat ul li {	list-style:none;	display: inline-block;	width:25%;	padding:2px 0;	overflow:hidden;		margin:5px 0;		text-align: center;	}	.post .content .linkcat ul li a {	height:1.2rem;	line-height:1.2rem;	text-decoration:none;	}        .nav-icon-normal {        width: 32px;        height: 32px;        line-height: 33px;        display: inline-block;        border-radius: 6px;        background-color: #b3b4c5;        vertical-align: middle;        overflow: hidden;        font-size: 16px;        text-indent: 8px;        text-align: center;        letter-spacing: 8px;        color: #fff;        word-break: break-all;        display: block;        margin: 0 auto;       }      </style></head>	<body>

<!-- wrap START --><!-- container START --><!-- content START --><div id="content"> <!-- main START --> <div id="main_link"> <?php $linkcats = $wpdb->get_results("SELECT T1.name AS name FROM $wpdb->terms T1, $wpdb->term_taxonomy T2 WHERE T1.term_id = T2.term_id AND T2.taxonomy = 'link_category'"); ?> <div class="post" id="post-<?php the_ID(); ?>"> <div class="content"> <?php if($linkcats) : foreach($linkcats as $linkcat) : ?> <div class="boxcaption"><h3><?php echo $linkcat->name; ?></h3></div> <div class="box linkcat"> <ul> <?php $bookmarks = get_bookmarks('orderby=rating & category_name=' . $linkcat->name); if ( !empty($bookmarks) ) { foreach ($bookmarks as $bookmark) { $linkimg = "'".$bookmark->link_url. "'"; echo '<li><div class="nav-icon-normal" id="' . $bookmark->link_id . '" style="background-color:#'. str_pad(pow($bookmark->link_id,3), 6, 'f', STR_PAD_BOTH) .'" onclick="window.location.href='.$linkimg .';return false">' . $bookmark->link_name . '</div><a href="' . $bookmark->link_url . '" title="' . $bookmark->link_description . '">' . $bookmark->link_name . '</a></li>'; } } ?> </ul> </div> <?php endforeach; endif; ?> </div> </div> <!-- main END --></div><!-- content END --></div><!-- container END --><!-- wrap END --></body></html>

WordPress制作链接页面(网址导航/收藏)的步骤

我也不知道怎么描述这个功能,简单来说就是制作一个纯链接的页面,这个页面分类显示网站的链接,具体效果可以在这里查看https://www.jingfengshuo.com/links

我把需要经常访问的网站聚合在一个页面里,设置为手机浏览器的主页,这样可以方便地访问,不用依赖于浏览器自带的同步功能,这样即使更换浏览器也不影响我使用了。

制作方法如下:

1、将links.php放到主题的目录下

2、后台-页面-新建页面

3、填写标题,内容为空,模板选择Links

这样就可以得到一个显示网址链接的页面了。

网址书签(收藏夹)主页开发小记DIV添加超链接小记里描述了代码实现的过程,当时是依托于主题样式写的,更换主题又要重新调整,这次稍微修改了代码,把CSS样式直接写在一起,现在是主题无关的,拿下来直接就可以用了。

2020年5月25日星期一

DIV添加超链接小记

接上篇,已经实现了上面是纯文字“图片”下面是文字的效果,但是有个问题是“图片”没有超链接,点击没反应,体验不太好,于是想着把“图片”(实际是文字)加上超链接。最简单的方法是加<a>标签,但是测试后发现点击链接的瞬间图片中的文字会变色,而且会有下划线。然后想着能不能给“图片”外的整个DIV加超链接,发现可以通过通过window.location.href函数来实现:

<div onclick="window.location.href= 'www.baidu.com';return false">在当前窗口跳转至百度</div>

看起来很简单,但是我在这里摸索了好长时间,问题就出在PHP的echo输出不能有嵌套单引号。

echo的输出一般是这样:echo ‘ <div></div> ‘ ;

单引号里面再嵌套单引号会报错,如下:

echo  ' <div onclick="window.location.href= 'www.baidu.com';return false"> ' ;

我试图去掉单引号或者把单引号改成双引号,发现不会报错了,但是点击不会跳转。

后来的解决办法是把单引号的内容放在变量里,这样形式上echo里没有嵌套单引号了,问题得到解决。把$bookmark->link_url加上单引号放到linkimg里,代码如下:

$linkimg = "'".$bookmark->link_url. "'";echo '<li><div class="nav-icon-normal" id="' . $bookmark->link_id . '" style="background-color:#'. str_pad(pow($bookmark->link_id,3), 6, 'f', STR_PAD_BOTH) .'" onclick="window.location.href='.$linkimg .';return false">' . $bookmark->link_name . '</div><a href="' . $bookmark->link_url . '" title="' . $bookmark->link_description . '">' . $bookmark->link_name . '</a></li>';

DIV添加超链接小记

接上篇,已经实现了上面是纯文字“图片”下面是文字的效果,但是有个问题是“图片”没有超链接,点击没反应,体验不太好,于是想着把“图片”(实际是文字)加上超链接。最简单的方法是加<a>标签,但是测试后发现点击链接的瞬间图片中的文字会变色,而且会有下划线。然后想着能不能给“图片”外的整个DIV加超链接,发现可以通过通过window.location.href函数来实现:

<div onclick=”window.location.href= ‘www.baidu.com’;return false”>在当前窗口跳转至百度</div>

看起来很简单,但是我在这里摸索了好长时间,问题就出在PHP的echo输出不能有嵌套单引号。

echo的输出一般是这样:echo ‘ <div></div> ‘ ;

单引号里面再嵌套单引号会报错,如下:

echo ‘ <div onclick=”window.location.href= ‘www.baidu.com’;return false”> ‘ ;

我试图去掉单引号或者把单引号改成双引号,发现不会报错了,但是点击不会跳转。

后来的解决办法是把单引号的内容放在变量里,这样形式上echo里没有嵌套单引号了,问题得到解决。把$bookmark->link_url加上单引号放到linkimg里,代码如下:

$linkimg = "'".$bookmark->link_url. "'";echo '
  • ' . $bookmark->link_name . '
  • ';

    2020年5月22日星期五

    网址书签(收藏夹)主页开发小记

    从Chrome诞生起就用了,到现在有十几年了,无奈Google在国内是不存在的,Chrome无法同步数据包括网址书签,每回换电脑和手机都要手工加一堆书签便于访问,好在常用的不多,也就十几个,加起来也不难,所以一直也没想到解决书签同步的问题。

    前几天突然想为什么自己不做个书签主页,类似于导航网站那样,把经常访问的网址放在浏览器主页。

    我想着找一个现成的导航网站源码,然后挂到虚拟主机空间里,再绑定一个子域名。找来找去,都是臃肿的,没有合适的。

    后来想着WordPress自带链接页,何不把这个链接页改造一下呢。

    我用的WordPress主题是inove,差不多有十年了,大大小小的修改很多,也不想去折腾了。但是inove诞生的时候没有考虑手机浏览的问题,只能自己动手把links页面给改造成手机和PC都能友好访问的页面。

    在网站HTML文件的开头,增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度,且不进行初始缩放。代码如下:

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

    然后把页面中固定宽度的删除,再删除掉head和foot,下面就是不断的调整css的样式了,调一点看下效果,模样初现了。

    只显示链接文字,Jasmine说太单调,辨识度不高,于是想在链接上面加个图片,实现的效果是图片在上,下面显示网址标题及链接。图片直接取网站favicon的图标,如下:

    <img src="', $bookmark->link_url , '/favicon.ico" onerror="this.src=img/wp-logo.png "/>

    实际发现好多问题:1、加载缓慢。2、好多网址取不到favicon.ico。3、由于网络及缓存原因,有时能取到有时取不到favicon.ico

    于是干脆不要favicon.ico了,直接用纯文字的首字作为图片,为了提高辨识度,“图片”的背景色要不一样。

    HTML部分的代码如下:

    <div class="content">			<?php if($linkcats) : foreach($linkcats as $linkcat) : ?>				<div class="boxcaption"><H6><?php echo $linkcat->name; ?><h6></div>				<div class="box linkcat">					<ul>						<?php							$bookmarks = get_bookmarks('orderby=rating & category_name=' . $linkcat->name);							if ( !empty($bookmarks) ) {								foreach ($bookmarks as $bookmark) {									echo '<li><div class="nav-icon-normal" id="' . $bookmark->link_id . '" style="background-color:#'. str_pad(pow($bookmark->link_id,3), 6, 'f', STR_PAD_BOTH) .'" >' . $bookmark->link_name . '</div><a href="' . $bookmark->link_url . '" title="' . $bookmark->link_description . '">' . $bookmark->link_name . '</a></li>';								}							}						?>					</ul>					<div class="fixed"></div>				</div>			<?php endforeach; endif; //the_content(); ?>			<div class="fixed"></div></div>

    CSS样式如下:

    /* linkcat START */.post .content .linkcat ul li {	list-style:none;	float:left;	width:25%;	padding:2px 0;	overflow:hidden;		margin:5px 0;		text-align: center;}.post .content .linkcat ul li a {	padding-left:22px;*/	height:1.2rem;	line-height:1.2rem;}.nav-icon-normal {       width: 32px;       height: 32px;       line-height: 33px;       display: inline-block;       border-radius: 6px;       background-color: #b3b4c5;       vertical-align: middle;       overflow: hidden;       font-size: 16px;       text-indent: 8px;       text-align: center;       letter-spacing: 8px;       color: #fff;       word-break: break-all;       display: block;       margin: 0 auto;}/* linkcat END */

    核心代码如下:

    echo '<li><div class="nav-icon-normal" id="' . $bookmark->link_id . '" style="background-color:#'. str_pad(pow($bookmark->link_id,3), 6, 'f', STR_PAD_BOTH) .'" >' . $bookmark->link_name . '</div><a href="' . $bookmark->link_url . '" title="' . $bookmark->link_description . '">' . $bookmark->link_name . '</a></li>';

    纯文字的首字图片背景颜色取得是链接的id,然后补全成6位十六进制颜色,这里用了这个函数str_pad($string, 6, ‘f’, STR_PAD_BOTH),用f来补充。因为id很接近,为了更好的区分颜色,我用了pow(x,y)函数把id的数字扩大化,最终使用的函数是str_pad(pow($bookmark->link_id,3), 6, ‘f’, STR_PAD_BOTH)

    因为多次修改HTML页面,可能会有HTML标签不闭合的问题,推荐使用在线的HTML标签闭合检测工具来检查下页面代码。

    点击查看我做出来的链接页效果

    PS. 链接的排序用的是orderby=rating,评分低的在前面。

    网址书签(收藏夹)主页开发小记

    从Chrome诞生起就用了,到现在有十几年了,无奈Google在国内是不存在的,Chrome无法同步数据包括网址书签,每回换电脑和手机都要手工加一堆书签便于访问,好在常用的不多,也就十几个,加起来也不难,所以一直也没想到解决书签同步的问题。

    前几天突然想为什么自己不做个书签主页,类似于导航网站那样,把经常访问的网址放在浏览器主页。

    我想着找一个现成的导航网站源码,然后挂到虚拟主机空间里,再绑定一个子域名。找来找去,都是臃肿的,没有合适的。

    后来想着WordPress自带链接页,何不把这个链接页改造一下呢。

    我用的WordPress主题是inove,差不多有十年了,大大小小的修改很多,也不想去折腾了。但是inove诞生的时候没有考虑手机浏览的问题,只能自己动手把links页面给改造成手机和PC都能友好访问的页面。

    在网站HTML文件的开头,增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度,且不进行初始缩放。代码如下:

    <meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;” name=”viewport” />

    然后把页面中固定宽度的删除,再删除掉head和foot,下面就是不断的调整css的样式了,调一点看下效果,模样初现了。

    只显示链接文字,Jasmine说太单调,辨识度不高,于是想在链接上面加个图片,实现的效果是图片在上,下面显示网址标题及链接。图片直接取网站favicon的图标,如下:

    <img src=”‘, $bookmark->link_url , ‘/favicon.ico” onerror=”this.src=img/wp-logo.png “/>

    实际发现好多问题:1、加载缓慢。2、好多网址取不到favicon.ico。3、由于网络及缓存原因,有时能取到有时取不到favicon.ico

    于是干脆不要favicon.ico了,直接用纯文字的首字作为图片,为了提高辨识度,“图片”的背景色要不一样。

    HTML部分的代码如下:

    name; ?>
      name); if ( !empty($bookmarks) ) { foreach ($bookmarks as $bookmark) { echo '
    • ' . $bookmark->link_name . '
    • '; } } ?>

    CSS样式如下:

    /* linkcat START */.post .content .linkcat ul li {	list-style:none;	float:left;	width:25%;	padding:2px 0;	overflow:hidden;		margin:5px 0;		text-align: center;}.post .content .linkcat ul li a {	padding-left:22px;*/	height:1.2rem;	line-height:1.2rem;}.nav-icon-normal {       width: 32px;       height: 32px;       line-height: 33px;       display: inline-block;       border-radius: 6px;       background-color: #b3b4c5;       vertical-align: middle;       overflow: hidden;       font-size: 16px;       text-indent: 8px;       text-align: center;       letter-spacing: 8px;       color: #fff;       word-break: break-all;       display: block;       margin: 0 auto;}/* linkcat END */

    核心代码如下:

    echo ‘<li><div class=”nav-icon-normal” id=”‘ . $bookmark->link_id . ‘” style=”background-color:#’. str_pad(pow($bookmark->link_id,3), 6, ‘f’, STR_PAD_BOTH) .'” >’ . $bookmark->link_name . ‘</div><a href=”‘ . $bookmark->link_url . ‘” title=”‘ . $bookmark->link_description . ‘”>’ . $bookmark->link_name . ‘</a></li>’;

    纯文字的首字图片背景颜色取得是链接的id,然后补全成6位十六进制颜色,这里用了这个函数str_pad($string, 6, ‘f’, STR_PAD_BOTH),用f来补充。因为id很接近,为了更好的区分颜色,我用了pow(x,y)函数把id的数字扩大化,最终使用的函数是str_pad(pow($bookmark->link_id,3), 6, ‘f’, STR_PAD_BOTH)

    因为多次修改HTML页面,可能会有HTML标签不闭合的问题,推荐使用在线的HTML标签闭合检测工具来检查下页面代码。

    点击查看我做出来的链接页效果

    PS. 链接的排序用的是orderby=rating,评分低的在前面。