imaniy
4 سال پیش توسط imaniy مطرح شد
14 پاسخ

لینک کردن تگ های h در پست

دوستان دیدین به لینک آیدی میدین وقتی روش کلیک میکنین میره رو همون آیدی؟ این کار معمولا برای منو مناسبه حالا من میخام این کار رو برای پست های وبلاگ انجام بدم یعنی بیام هر چی تگ H تو سایت هست رو بگیرم و تو سایدبار نمایش بدم و با کلیک روی اون کاربر به سمت اون تگ هدایت بشه خیلی از این سایت ها دیدم ولی راستش نمیدونم دقیقا خودم چطوری اینکار رو انجام بدم؟ سیستم هم وردپرس هستش.
عکس


ثبت پرسش جدید
احسان قربانی
تخصص : PHP ، در حال یادگیری لاراول ،...
@TimeRunner2359 4 سال پیش مطرح شد
1

@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

موفق و سلامت باشید


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
1

برای ایجاد ارتباط بین یک پیوند و یک عنوان در صفحه، باید به اون عنوان یک شناسه بدین و پیوندتون رو هم بهش وصل کنید.
مثال زیر یک نمونه ساده هستش:

<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>

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
1

اصطلاحا بهش میگن لنگر انداختن (Anchor Links).
این هم برای وردپرس:
https://www.wpbeginner.com/beginners-guide/how-to-easily-add-anchor-links-in-wordpress-step-by-step/


imaniy
تخصص : طراح وب
@imaniy 4 سال پیش مطرح شد
1

@milad
میلاد جان ممنون بابت پاسخگویی ولی شاید من بد نوشتم ببینید این حرف هایی که بالا گفتین درسته منم بلدم این رو.
مشکل اینجاست که من میخام اینکار خودکار انجام بشه یعنی مثالا با jquery یا جاوااسکریپت بیام هر چی تگ H تو متن هست رو بگیرم و تو سایدباری که دارم نمایش بدم و کاربر با کلیک اونها تو سایدبار به اون تگ H هدایت بشه خیلی از سایت ها اینکار رو میکنن و فک نمیکنم دستی باشه.


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
1

بی زحمت یکی از سایت های مدنظرتون رو نشونی بدین، من نگاه بندازم بهتر می تونم راهش رو پیدا کنم.


imaniy
تخصص : طراح وب
@imaniy 4 سال پیش مطرح شد
میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

ممنونم، یک افزونه ی مخصوص واسه این کار وجود داره.

بفرمایید این هم توضیحات تفصیلی:
http://starwp.ir/table-of-contents/


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

دریافت افزونه ایجاد جدول محتوا:
https://wordpress.org/plugins/luckywp-table-of-contents/


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
1

به نظرم عنوان سوال تون من رو به خطا بُرد، می تونید اسمش رو مثلا بزارید: افزونه ی جدول محتوا، یا: ایجاد جدول محتوا برای مطالب
کلا تصورم این بودش که خودتون دستی می خواید این کار رو کنید، که البته حق با شماست و بصورت دستی کار زمانبری میشه و کسی نمیاد انجامش بده.


احسان قربانی
تخصص : PHP ، در حال یادگیری لاراول ،...
@TimeRunner2359 4 سال پیش مطرح شد
1

سلام و وقت بخیر .
خدمت شما
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

موفق و سلامت باشید


imaniy
تخصص : طراح وب
@imaniy 4 سال پیش مطرح شد
0

@TimeRunner2359

احسان جان بسیار لطف کردی.
ببین اینجا بازم شما اومدی دستی H ها رو آیدی گذاری کردی ولی برای من کاربرد نداره ببین من دارم برای وردپرس قالب میزنم و این بخش که این قابلیت رو داره بخش blog هستش خب اینجا کاربر تو قسمت بلاگ میاد مثالا 6 تا H میزاره من میخام بطور خودکار شناسایی بشه و در سایدبار من نمایش داده بشه.

حالا اگه اینی که من گفتم راهی نداره از همین روش شما استفاده میکنم البته فک کنم بشه مثالا بگیم هر H که تو صفحه پیدا کرد یه id به بده نمیشه؟


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
1

@imaniy
افزونه ای که معرفی کردم خدمتتون و پیوندهای مرتبطش رو نگاه کردید؟
دقیقا همون چیزی هستش که شما میخواهید. یک بررسی کنید، جواب همین هستش.


imaniy
تخصص : طراح وب
@imaniy 4 سال پیش آپدیت شد
1

@milad

میلاد جان تست کردم ولی بله فک کنم همین افزونه هایی ک گفتین کار رو جلو میبره ولی میخاستم بدونم اگه فردا برای یه سایت اختصاصی که با php زده شد باید چیکار کنم بنظرم احسان عزیز هم راهنمایی خوبی تو این زمینه کردن.


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
1

برای وردپرس همین افزونه مورد استفاده قرار می گیره.
برای غیر وردپرس هم می تونید همین افزونه رو بررسی کنید، یا اینکه بصورت مجزا سوالتون رو مطرح کنید که دوستان در بحث شرکت کنند.

الان شما موضوع گفتگو رو که مطرح کردید، اشاره کردید وردپرس. شاید بهمین دلیل کمتر مشارکت صورت گرفت.


احسان قربانی
تخصص : PHP ، در حال یادگیری لاراول ،...
@TimeRunner2359 4 سال پیش مطرح شد
1

@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

موفق و سلامت باشید


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام