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

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

حتما برای شما هم پیش آمده که بخواهید متنی طولانی را در صفحه وب خودتان استفاده کنید، ولی این متن طولانی صفحه وب شمارا نازیبا کرده است. یا شاید دیده باشید که در اکثر وبسایت‌ها و وبلاگ‌ها بخشی از متن را نشان میدهند و برای دیدن مطلب کامل برای روی دکمه‌ای به نام “ادامه مطلب” کلیک کنید. در این مقاله و فیلم آموزشی دقیقا میخواهیم نحوه پیاه سازی این قابلیت را با کدهای PHP نمایش بدهیم. برای درک بهتر آموزش فیلم آنرا دانلود کنید، ولی اگر امکان دانلود فیلم برای شما وجود ندارد میتوانید از آموزش متنی استفاده کنید.

dl-btnدانلود این آموزش با کیفیت بالا و کاملا واضح (حجم ۳۷ مگ)dl-btn

آموزش متنی

نکته مهم : آموزش‌های ویدئویی قطعا بسیار کامل تر از آموزش‌های متنی هستند و اگر قادر به دانلود آموزش ویدئویی هستید، حتما اینکار را انجام دهید، چون در آن بصورت بسیار کامل و با جزئیات همه موارد را توضیح داده‌ایم.

برای اینکار ابتدا باید یک متن داشته باشیم که عملیات تستی خودمان را روی آن متن انجام دهیم. برای اینکار توسط متن تستی که از سایت لورم ایپسوم گرفته ایم استفاده میکنیم و مانند کد زیر آنرا درون یک متغیر با نام string قرار میدهیم:

این قابلیت را میتوان به ۲ صورت پیاه سازی کرد.یک صورت بسیار ساده و یک صورت کامل و کمی پیچیده (البته برای مبتدی‌ها). که به شما قول میدهم با کمی دقت و تمرین از میزان پیچیدگی این کد بشدت کم خواهد شد و شما کاملا به آن تسلط پیدا میکنید. اول بصورت ساده این امکان را پیاده سازی میکنیم.

در کد زیر از تابع substr استفاده کرده ایم و کار این تابع این است که یک رشته را میگیرد و آنرا کوتاه میکند. این تابع ۳ پارامتر دریافت میکند:
پارامتر اول : رشته‌ای که میخواهیم کوتاه شود.
پارامتر دوم : این رشته از چندمین کاراکتر کوتاه شود ؟
پارامتر سوم : این رشته چند کاراکتر کوتاه شود ؟
برای مثال در کد زیر ما همان متغیر string بالا را از کاراکتر شماره ۰، یعنی همان ابتدای این رشته به مقدار ۳۰۰ کاراکتر کوتاه میکنیم :

و بعد میتوانیم آنرا چاپ کنیم و در ادامه آن هم یک متن “ادامه مطلب” قرار دهیم و بجای # از لینک مدنظر خودمان استفاده کنیم :

حالا اگر این فایل را در مرورگر باز کنیم مبینیم که فقط ۳۰۰ کاراکتر از متغیر string برای شما نمایش داده میشود (مانند عکس زیر) و اینکار توسط همان تابع substr انجام شده است.

یک مشکل !

read-more-p1

شاید تا همینجای کار برای شما کاملا خوب باشد و کارتان را راه بیندازد، ولی میخواهیم کمبی بیشتر پیش بریم و کمی کدمان را حرفه‌ای تر بکنیم. ممکن است در این مثال ما کارکتر شماره ۳۰۰ دقیقا وسط یک کلمه باشد و یک کلمه را از وسط قطع کند، که این موضوع زیاد برای کسانی که میخواند حرفه‌ای کدنویسی کنند جالب نیست.برای حل این مشکل میتوانیم از تکه کد زیر استفاده کنیم :

در خط یک کد بالا با استفاده از همان تابع substr متغیر string را به ۳۰۰ کاراکتر محدود و کوتاه کرده‌ایم و در خط دوم دوباره همان مقدار کوتاه شده را کوتاه کردیم ولی اینبار در پارامتر سوم substr گفتیم که تا جایی کوتاه کن که به اولین فاصله برخورد کردی، و همین ترفند ساده برای ما مشکل بریده شدن یک کلمه از وسط را حل میکند :

read-more-p2

درباره نویسنده

از حدود 5 سالگی با دنیایی به اسم کامپیوتر آشنا شدم و الان چیزی حدود 6 سال است که با کامپیوتر (و خصوصا برنامه‌نویسی) زندگی میکنم. در زنبیل دوست دارم اطلاعاتم را با شما دوستان عزیزم به اشتراک بگذارم. برای دانلود دوره‌های رایگان و ویژه لطفا به www.xanbil.com/vip مراجعه کنید.از توجه شما ممنونم :)

مطالب مرتبط

5 نظر

  1. مجتبی

    این آموزش هم مثل طراحی CMS بسیار کاربردی بود و لذت بردم و ازش استفاده خواهم کرد.
    در ضمن اون CMS که شما آموزش دادید رو ارتقا دادم و ویژگی های جالبی از قبیل : (محبوب ترین مطالب ، جدیدترین نظرات همراه با پاسخ مدیریت به آنها و جستجو در مطالب) رو هم بهش اضافه کردم ..
    یه سوال داشتم .آیا شما Xanbil رو با WordPress نوشتید؟؟؟؟؟؟

    پاسخ
    1. مهدی خسروی

      سلام مجتبی عزیز،
      از محبت شما واقعا ممنونم و خوشحالم که آموزش‌ها برای شما تا این حد مفید بوده‌اند.
      بله، زنبیل بر پایه‌ی سیستم مدیریت محتوای WordPress طراحی و پیاده‌سازی شده است.

      پاسخ
  2. جواد

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

    پاسخ
    1. مهدی خسروی

      جواد گرامی سلام،
      پیشنهاد خوبی است و تلاشم را می‌کنم که حتما درباره‌ی این موضوع در آینده آموزشی روی سایت قرار دهم.

      پاسخ

نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

7 ساعت آموزش رایگان و پروژه‌محور طراحی وب
ایمیل خود را در زیر وارد کنید تا لینک دانلود 7 ساعت آموزش ویدئویی طراحی وب با HTML5 و CSS3 بلافاصله برایتان ایمیل شود.
در این دوره 2 پروژه‌ی عملی را از صفر تا صد باهم طراحی و برنامه‌نویسی خواهیم کرد.
قول می‌دهیم اطلاعات شما نزد ما محفوظ بماند :)
programmer