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

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

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

ساخت فروشگاه اینترنتی با php

آموزش متنی

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

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

$string = "لورم ایپسوم متن ساختگی تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.";

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

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

$stringCut = substr($string, 0, 300);

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

echo $stringCut . "... <a href='#'>ادامه مطلب</a>"

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

ساخت فروشگاه اینترنتی با php

یک مشکل !

read-more-p1

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

$stringCut = substr($string, 0, 300);
echo substr($stringCut, 0, strrpos($stringCut, ' ')) . "... <a href='#'>ادامه مطلب</a>";

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

read-more-p2

طراحی یکسان در مرورگرهای مختلف با CSS Reset ها

حتما برای شما هم پیش آمده که وب سایتی را با HTML و CSS طراحی کرده‌اید ولی بعد از تست های مخلف متوجه تفاوت‌هایی بین نمایش آن در بین مرورگرهای مختلف شده‌اید.کار CSS Reset ها دقیقا همین است. یک CSS Reset چیزی جز چند خط کد CSS ساده نیست که کارش این است که استایل های پیش‌فرضی که هر مرورگر به المان‌های HTML می‌دهد را بصورت کامل غیرفعال و خنثی کند تا در پایان طراحی، طرح ما در مرورگرهای مختلف یک شکل تقریبا یکسان نمایش داده شود.در ویدئوی زیر بصورت کامل کار CSS Reset ها را یاد خواهید گرفت :

dl-btnدانلود فیلم آموزشی معرفی و کار با CSS Reset ها با کیفیت بالا (با حجم 15 مگ)dl-btn
dl-btnدانلود فایل reset.cssdl-btn

آموزش متنی

برای کار با CSS Reset ها فقط کافی است کدهای CSS Reset  را از لینک بالا دانلود کنید و آنرا با دستور import@ در اول فایل CSS اصلی خودتان لود کنید :

@import "reset.css";

CSS Reset خودتان را همچنین میتوانید در اول فایل HTML خود با دستور link لود کنید ولی در دنیای طراحان وب مرسوم است که CSS Reset خود را در فایلی جداگانه با اسم reset.css ذخیره میکنند و بعد آن فایل را در ابتدای فایل استایل اصلی خودشان با دستور بالا وارد میکنند.

توجه کنید که شما میتوانید CSS Reset را با توجه به نیاز و پروژه خودتان دست‌کاری کنید و قسمت‌هایی از آن که کار شما را خراب میکنند حذف و یا قسمت‌های جدید که کار شما را توسعه می‌دهند به آن اضافه کنید.

آماده‌سازی مقدمات برای شروع طراحی وب

حتما در ویدئوهای آموزشی دیده‌اید که ما از یکسری تنظیمات خاص برای محیط توسعه خودمان استفاده میکنیم. این تنظیمات میتواند برای شما متفاوت باشد.ولی شاید شما دوست داشته باشید که بین شما و محیط توسعه‌ای که در آموزش‌ها هست شباهتی وجود داشته باشد.در این ویدئو آموزشی تمام تنظیماتی که برای آماده سازی مقدمات برای طراحی وب نیاز داریم را به شما معرفی میکنیم و همینطور با چند کلید میانبر اصلی IDE که سرعت کار مارا چندین برابر می‌کند آشنا می‌شویم :

 

dl-btnدانلود فیلم آموزشی + تنظیمات محیط توسعه + لینک دانلود نرم افزارها با حجم 30 مگdl-btn

معرفی سایت‌های رایگان دانلود آیکون

سلام به همه‌ی کاربران عزیز زنبیل. قطعا واسه شما هم پیش اومده که در حال طراحی یک اپلیکیشن یا یک وب‌سایت بودید و به آیکون‌هایی برای قسمت منو یا… نیاز پیدا کردید. افراد مختلف با توجه به علافه‌ی خودشون روش‌های مختلفی رو استفاده میکنند تا به آیکون مد نظرشون دست پیدا کنند. توی این ویدئوی آموزشی به شما 4 سایت فوق‌العاده رو معرفی میکنم که با کمک آن‌ها می‌تونید به دنیایی از ایکون‌های رایگان در انواع فرمت‌ها دسترسی پیدا کنید :

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

آموزش متنی

برای دانلود آیکون‌هایی با هر موضوعی که مد نظرتان هست کافی‌ست به یکی از 4 سایت زیر مراجعه کنید و در قسمت جستجوی هر سایت نام موضوعی که در آن حیطه به دنبال ایکون می‌گردید را وارد کنید و سپس از لیستی که برای شما نمایش داده می‌شود ایکون مد نظرتان را انتخاب و دانلود کنید :

www.flaticon.com
www.iconfinder.com
www.iconmonstr.com
www.mricons.com

نکته :‌ ممکن است در برخی مواقع، برخی از این 4 سایت با IP ایران مشکل داشته باشند و باز نشوند.به هر حال سایت اول (www.flaticon.com) در اکثر مواقع قابل دسترسی است و می‌تواند پاسخگویی بسیاری از نیازهای شما باشد.

برای درک بهتر آموزش و یادگیری جزئیات بیشتر پیشنهاد میکنم فیلم آموزشی را مشاهده کنید.