지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > CMS 튜토리얼 > Word누르다 > WordPress 블로그에 북마크를 추가하는 방법은 무엇입니까? (구현코드 첨부)

WordPress 블로그에 북마크를 추가하는 방법은 무엇입니까? (구현코드 첨부)

青灯夜游
풀어 주다： 2023-02-28 20:00:23
앞으로
1837명이 탐색했습니다.

WordPress 블로그에 북마크를 추가하는 방법은 무엇입니까? 다음 글에서는 WordPress 블로그에 즐겨찾는 북마크를 추가하는 방법과 구현 코드를 첨부하는 방법을 설명하겠습니다. 도움이 되길 바랍니다.

WordPress 블로그에 북마크를 추가하는 방법은 무엇입니까? (구현코드 첨부)

지난 이틀 동안 저는 독자들이 기사를 수집하고 공유할 수 있도록 기사 아래에 있는 버튼인 "소셜 북마크"를 블로그에 추가하는 작업을 고민했습니다. 북마크 기능을 구현하기 위해 인터넷에서 사용할 수 있는 WordPress 플러그인이 많이 있지만 대부분의 플러그인은 JS 코드 일부만 제공하고 그 외에는 아무것도 제공하지 않으며 코드 사용자 정의가 매우 열악합니다.

좋은 소식은 일부 웹사이트에서 북마크 기능을 구현하는 코드를 제공한다는 점입니다. 그래서 몇 가지 테스트를 해보았지만 결과가 그다지 만족스럽지 못했습니다. 일부 코드가 실패하고 작은 그림이 너무 많이 호출되어 http 연결 수가 증가하고 웹사이트 로딩 속도에 일정한 영향을 미쳤습니다. 스스로 도움을 요청하는 것보다 도움을 요청하는 것이 더 좋습니다. 주요 북마크 웹사이트에서 최신 코드를 다운로드한 후 CSS Sprites 기술을 사용하여 이러한 작은 그림을 하나로 결합했습니다. 또한 코드가 최적화되어 W3C 검증을 통과했습니다.

아래 그림은 성공적으로 생성된 북마크의 효과입니다. 아마도 이 기사 아래에서 보는 내용이 더 깊은 경험을 제공할 수 있을 것입니다.

WordPress 블로그에 북마크를 추가하는 방법은 무엇입니까? (구현코드 첨부)

좋은 것은 혼자만 간직할 수 없습니다. 단추. 매우 간단합니다.

1. WordPress 테마 폴더에서 Single.php를 엽니다.

2. 적합한 위치입니다): 

<div id="soucang">
<strong>
	<span style="color:#9932CC">收藏</span><span style="color:#57c200"> & </span>
	<span style="color:#9932CC">分享</span>
</strong>

<ul>
<li id="kaixin">
	<a href="http://www.kaixin001.com/repaste/share.php?rtitle=<?php echo urlencode($post->post_title);?>&rurl=<?php echo urlencode(get_permalink($post->ID));?>&rcontent=<?php $desc = strip_tags($post->post_excerpt); echo urlencode($desc); ?>" title="转贴到开心网" rel="nofollow"><span></span></a>
</li>

<li id="jiudian">
	<a title="推荐到九点" href="http://www.douban.com/recommend/?url=<?php echo urlencode(get_permalink($post->ID));?>&title=<?php echo urlencode($post->post_title);?>" rel="nofollow"><span></span></a>
</li>

<li id="douban">
	<a title="推荐到豆瓣" href="http://www.douban.com/recommend/?url=<?php echo urlencode(get_permalink($post->ID));?>&title=<?php echo urlencode($post->post_title);?>" rel="nofollow"><span></span></a>
</li>

<li id="yahoo">
	<a title="雅虎收藏" href="http://myweb.cn.yahoo.com/popadd.html?url=<?php echo urlencode(get_permalink($post->ID));?>&title=<?php echo urlencode($post->post_title);?>" rel="nofollow"><span></span></a>
</li>

<li id="google">
	<a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<?php echo urlencode(get_permalink($post->ID));?>&title=<?php echo urlencode($post->post_title);?>" title="Google书签" rel="nofollow"><span></span></a>
</li>

<li id="baidu">
	<a href="http://cang.baidu.com/do/add?it=<?php echo urlencode($post->post_title);?>&iu=<?php echo urlencode(get_permalink($post->ID));?>" title="百度搜藏" rel="nofollow"><span></span></a>
</li>

<li id="qq">
	<a href="http://shuqian.qq.com/post?from=3&title=<?php echo urlencode($post->post_title);?>&uri=<?php echo urlencode(get_permalink($post->ID));?>" title="收藏到QQ书签" rel="nofollow"><span></span></a>
</li>

<li id="vivi">
	<a href="javascript:d=document;t=d.selection?(d.selection.type!=&#39;None&#39;?d.selection.createRange().text:&#39;&#39;):(d.getSelection?d.getSelection():&#39;&#39;);void(vivi=window.open(&#39;http://vivi.sina.com.cn/collect/icollect.php?pid=www.ludou.org&title=&#39;+escape(d.title)+&#39;&url=&#39;+escape(d.location.href)+&#39;&desc=&#39;+escape(t),&#39;vivi&#39;,&#39;scrollbars=no,width=480,height=480,left=75,top=20,status=no,resizable=yes&#39;));vivi.focus();" title="保存到爱问ViVi收藏夹"><span></span></a>
</li>			

<li id="bolaa">
	<a href="javascript:d=document;t=d.selection?(d.selection.type!=&#39;None&#39;?d.selection.createRange().text:&#39;&#39;):(d.getSelection?d.getSelection():&#39;&#39;);void(blog=window.open(&#39;http://www5.bolaa.com/CommendBlog/SmallLogin.aspx?title=&#39;+escape(d.title)+&#39;&newspath=&#39;+escape(d.location.href)+&#39;&subtitle=&#39;+escape(t),&#39;bolaa&#39;,&#39;width=400px,height=400px&#39;));blog.focus();" title="推荐到博拉"><span></span></a>
</li>

<li id="poco">
	<a href="javascript:d=document;t=d.selection?(d.selection.type!=&#39;None&#39;?d.selection.createRange().text:&#39;&#39;):(d.getSelection?d.getSelection():&#39;&#39;);void(keyit=window.open(&#39;http://my.poco.cn/fav/storeIt.php?t=&#39;+escape(d.title)+&#39;&u=&#39;+escape(d.location.href)+&#39;&c=&#39;+escape(t)+&#39;&img=http://www.h-strong.com/blog/logo.gif&#39;,&#39;keyit&#39;,&#39;scrollbars=no,width=475,height=575,status=no,resizable=yes&#39;));keyit.focus();" title="收藏到POCO网摘" rel="nofollow"><span></span></a>
</li>

<li id="hexun">
	<a href="javascript:t=document.title;u=location.href;e=document.selection?(document.selection.type!=&#39;None&#39;?document.selection.createRange().text:&#39;&#39;):(document.getSelection?document.getSelection():&#39;&#39;);void(open(&#39;http://bookmark.hexun.com/post.aspx?title=&#39;+escape(t)+&#39;&url=&#39;+escape(u)+&#39;&excerpt=&#39;+escape(e),&#39;HexunBookmark&#39;,&#39;scrollbars=no,width=600,height=450,left=80,top=80,status=no,resizable=yes&#39;));" title="转帖到和讯网摘" rel="nofollow"><span></span></a>
</li>

<li id="delicious">
	<a href="http://www.delicious.com/post?url=<?php echo urlencode(get_permalink($post->ID));?>&title=<?php echo urlencode($post->post_title);?>" title="deliciou" rel="nofollow"><span></span></a>
</li>

<li id="xianguo">
	<script charset="utf8" type="text/javascript">
	cT="0";nc="#444";nBgc="";nBorder="#F5E5A9";tc="#649B00";tBgc="#FFF4D0";tBorder="#F5E5A9";tDigg="%E6%8E%A8%E8%8D%90";tDugg="%E5%B7%B2%E8%8D%90";defaultItemUrl="WEB_URL";defaultFeedUrl ="http://feed.feedsky.com/ludou";
	</script>
	<script type="text/javascript" charset="utf8" src="http://re.xianguo.com/api/diggthis.js"></script>
</li>
</ul>
</div>
로그인 후 복사

3. 위 코드의 www.ludou.org URL을 자신의 URL로 변경한 후 WordPress 테마 CSS 파일에 다음 코드를 추가하세요. 

#soucang {
	margin:15px auto;
}
#soucang ul {
	display:inline;
	position:absolute;
}
#soucang li {
	list-style:none;
	float:left;
	margin-right:10px;
	display:block;
}
#soucang li a span {
	/*请将下面的 http://example/m.gif 改成你自己的图片链接*/
	background:url(http://example/m.gif) no-repeat;
	display:block;
	height:16px;
	width:16px;
}
#soucang li#baidu  a span { background-position: 0 0; }
#soucang li#bolaa a span { background-position: 0 -17px; }
#soucang li#delicious a span { background-position: 0 -34px; }
#soucang li#douban a span { background-position: 0 -85px; }
#soucang li#google a span { background-position: 0 -102px; }
#soucang li#hexun a span { background-position: 0 -119px; }
#soucang li#jiudian a span { background-position: 0 -136px; }
#soucang li#kaixin a span { background-position: 0 -153px; }
#soucang li#poco a span { background-position: 0 -187px; }
#soucang li#qq a span { background-position: 0 -204px; }
#soucang li#vivi a span { background-position: 0 -221px; }
#soucang li#yahoo a span { background-position: 0 -238px; }
#soucang li#xianguo {margin-left:10px; padding-bottom:5px;}
로그인 후 복사

위 코드는 CSS Sprites 기술을 사용합니다. , #soucang li a span의 배경 이미지를 사용자 정의할 수 있습니다. 웹사이트 디렉토리에 넣고 http://example/m.gif를 자신의 이미지 주소로 변경하세요. 또한 위의 CSS 레이아웃이 귀하의 블로그에 적합하지 않은 경우 직접 변경할 수 있습니다.

자, 이것으로 이야기는 끝났습니다. 다양한 북마크 버튼을 보니 느낌이 많이 다르지 않나요? 실제로 이러한 북마크는 웹사이트를 아름답게 만드는 데도 도움이 됩니다. 혹시 있으시면 여기에 메시지를 남겨주세요.

웹페이지의 제한된 너비로 인해 여기에는 16개의 주요 북마크 버튼만 제공됩니다. 다른 북마크 버튼은 필요에 따라 추가할 수 있으며, 이는 제가 만든 것이 아닙니다. 위에 제공된 코드를 이해하고 나면 직접 추가하는 것은 어렵지 않습니다.

WordPress 블로그에 북마크를 추가하는 방법은 무엇입니까? (구현코드 첨부)

추천 학습: "WordPress Tutorial"

위 내용은 WordPress 블로그에 북마크를 추가하는 방법은 무엇입니까? (구현코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
php wordpress
원천：ludou.org
이전 기사：WordPress에서 테마 탐색 메뉴를 만드는 방법 (2) 다음 기사：WordPress에서 CMS 열 블록을 생성하는 방법을 자세히 설명하는 기사
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
URL 매개변수에서 얻은 PHP 배열이 예상대로 작동하지 않습니다. 카테고리 ID가 포함된 URL 매개변수가 있고 이를 다음과 같은 배열로 처리하려고 합니다. http://example.com?cat[]=3,9,13 PHP에서는 ...
에서 2024-04-06 22:09:02
0
1
1428
Apache에서 CustomLog 지시문을 어디에 배치해야 합니까? 저는 php:7.2-apachedocker를 사용하고 있습니다. 상태 확인 URL 로그인 액세스 로그를 비활성화해야 합니다. 이 링크를 기반으로 Customlog...
에서 2024-04-06 22:03:59
0
1
990
반환 값의 변수 형식은 무엇입니까? 저는 PHP를 처음 배우는 사람입니다. 코드 조각을 찾았습니다: if($x<time()){return[false,'error'];} 논리나 변수는 중요하지 ...
에서 2024-04-06 21:55:20
0
1
778
opentbs를 사용하여 odt 파일을 생성할 때 발생하는 문제: 동일한 키의 값이 별도의 열이 아닌 동일한 행에 표시됩니다. PHP를 사용하여 odt를 만들기 위해 OpenTbs라는 라이브러리를 사용하고 있는데, 열과 행이 동적으로 생성되기 때문에 사용하고 있습니다. 행과 열을 만드는 ...
에서 2024-04-06 20:18:18
0
1
483
루프 오버를 위해 ID별로 MySQL 결과 그룹화 mysql에 비행 데이터가 포함된 테이블이 있습니다. codeigniter3 travel_idair_idFlightDurationout_or_inflightdur...
에서 2024-04-06 17:27:56
0
1
406
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿