لینک کردن تگ های h در پست
دوستان دیدین به لینک آیدی میدین وقتی روش کلیک میکنین میره رو همون آیدی؟ این کار معمولا برای منو مناسبه حالا من میخام این کار رو برای پست های وبلاگ انجام بدم یعنی بیام هر چی تگ H تو سایت هست رو بگیرم و تو سایدبار نمایش بدم و با کلیک روی اون کاربر به سمت اون تگ هدایت بشه خیلی از این سایت ها دیدم ولی راستش نمیدونم دقیقا خودم چطوری اینکار رو انجام بدم؟ سیستم هم وردپرس هستش.
پاسخها
14
@imaniy
سلام و وقت بخیر .
بنده ایدی گذاری کردم چون احتمال میدادم که شما شاید همه ی h1 ها رو نخواید لینک کنید .
کاری نداره . هم ایدی و هم کلاس ها رو از h1 ها حذف کنید . و کد jquery رو اینطور ویرایش کنید :
var i = 1
var topics = []
var links = []
//get topics and adding id to them
$('h1').each(function (index,topic){
$(this).attr('id' , i)
i++
topics.push($(this).text())
})
//generating links as list items(li)
$.each(topics,function(index , topic) {
links.push("<li><a href='#"+ (index+1) +"'>" + topic + "</a></li>")
})
//adding li`s to ul
$('#menu').append(links.join(''))Running fiddle : FIDDLE
موفق و سلامت باشید
برای ایجاد ارتباط بین یک پیوند و یک عنوان در صفحه، باید به اون عنوان یک شناسه بدین و پیوندتون رو هم بهش وصل کنید.
مثال زیر یک نمونه ساده هستش:
<a href="#C4">Jump to Chapter 4</a>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
اصطلاحا بهش میگن لنگر انداختن (Anchor Links).
این هم برای وردپرس:
https://www.wpbeginner.com/beginners-guide/how-to-easily-add-anchor-links-in-wordpress-step-by-step/
گفتگوهای مرتبط
شاید پاسخ شما همینجا باشد
@milad
میلاد جان ممنون بابت پاسخگویی ولی شاید من بد نوشتم ببینید این حرف هایی که بالا گفتین درسته منم بلدم این رو.
مشکل اینجاست که من میخام اینکار خودکار انجام بشه یعنی مثالا با jquery یا جاوااسکریپت بیام هر چی تگ H تو متن هست رو بگیرم و تو سایدباری که دارم نمایش بدم و کاربر با کلیک اونها تو سایدبار به اون تگ H هدایت بشه خیلی از سایت ها اینکار رو میکنن و فک نمیکنم دستی باشه.
بی زحمت یکی از سایت های مدنظرتون رو نشونی بدین، من نگاه بندازم بهتر می تونم راهش رو پیدا کنم.
ممنونم، یک افزونه ی مخصوص واسه این کار وجود داره.
بفرمایید این هم توضیحات تفصیلی:
http://starwp.ir/table-of-contents/
دریافت افزونه ایجاد جدول محتوا:
https://wordpress.org/plugins/luckywp-table-of-contents/
به نظرم عنوان سوال تون من رو به خطا بُرد، می تونید اسمش رو مثلا بزارید: افزونه ی جدول محتوا، یا: ایجاد جدول محتوا برای مطالب
کلا تصورم این بودش که خودتون دستی می خواید این کار رو کنید، که البته حق با شماست و بصورت دستی کار زمانبری میشه و کسی نمیاد انجامش بده.
سلام و وقت بخیر .
خدمت شما
HTML :
<div>
<ul id="menu">
</ul>
<div>
<h1 class='topic' id='1'>
Topic 1
</h1>
<br>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aliquid culpa, aperiam obcaecati, eligendi expedita illum ipsam labore illo distinctio modi, impedit ullam cum, nihil sequi! Accusantium, eligendi quasi ducimus.
</p>
</div>
<div>
<h1 class='topic' id='2'>
Topic 2
</h1>
<br>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aliquid culpa, aperiam obcaecati, eligendi expedita illum ipsam labore illo distinctio modi, impedit ullam cum, nihil sequi! Accusantium, eligendi quasi ducimus.
</p>
</div>
<div>
<h1 class='topic' id='3'>
Topic 3
</h1>
<br>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aliquid culpa, aperiam obcaecati, eligendi expedita illum ipsam labore illo distinctio modi, impedit ullam cum, nihil sequi! Accusantium, eligendi quasi ducimus.
</p>
</div>
<div>
<h1 class='topic' id='4'>
Topic 4
</h1>
<br>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure aliquid culpa, aperiam obcaecati, eligendi expedita illum ipsam labore illo distinctio modi, impedit ullam cum, nihil sequi! Accusantium, eligendi quasi ducimus.
</p>
</div>
</div>JS (JQuery) :
var topics = []
var links = []
$('h1.topic').each(function (index,topic){topics.push($(this).text())})
$.each(topics,function(index , topic) {
links.push("<li><a href='#"+ (index +1) +"'>" + topic + "</a></li>")
})
console.log(links)
$('#menu').append(links.join(''))running fiddle : FIDDLE
موفق و سلامت باشید
احسان جان بسیار لطف کردی.
ببین اینجا بازم شما اومدی دستی H ها رو آیدی گذاری کردی ولی برای من کاربرد نداره ببین من دارم برای وردپرس قالب میزنم و این بخش که این قابلیت رو داره بخش blog هستش خب اینجا کاربر تو قسمت بلاگ میاد مثالا 6 تا H میزاره من میخام بطور خودکار شناسایی بشه و در سایدبار من نمایش داده بشه.
حالا اگه اینی که من گفتم راهی نداره از همین روش شما استفاده میکنم البته فک کنم بشه مثالا بگیم هر H که تو صفحه پیدا کرد یه id به بده نمیشه؟
@imaniy
افزونه ای که معرفی کردم خدمتتون و پیوندهای مرتبطش رو نگاه کردید؟
دقیقا همون چیزی هستش که شما میخواهید. یک بررسی کنید، جواب همین هستش.
میلاد جان تست کردم ولی بله فک کنم همین افزونه هایی ک گفتین کار رو جلو میبره ولی میخاستم بدونم اگه فردا برای یه سایت اختصاصی که با php زده شد باید چیکار کنم بنظرم احسان عزیز هم راهنمایی خوبی تو این زمینه کردن.
برای وردپرس همین افزونه مورد استفاده قرار می گیره.
برای غیر وردپرس هم می تونید همین افزونه رو بررسی کنید، یا اینکه بصورت مجزا سوالتون رو مطرح کنید که دوستان در بحث شرکت کنند.
الان شما موضوع گفتگو رو که مطرح کردید، اشاره کردید وردپرس. شاید بهمین دلیل کمتر مشارکت صورت گرفت.