Ehsaan

طراحی پوسته با Underscores

1 پست در این موضوع قرار دارد

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

(خودمونی نوشتن، سبک من هست و اگه جایی از نوشته رو متوجه نشدید، ببخشید! به خاطر لهجه اصفهانی یا گویش من هست)

قبل از اینکه معرفی کنم که آموزش درمورد چی هست، لازمه بگم که باید حداقل یه مقدار کم درمورد وردپرس و کدنویسی HTML و CSS اطلاعات داشته باشید، اگه مبتدی هستید و تازه میخواید شروع به طراحی کنید، پیشنهاد می‌کنم اول این آموزش کسری جان رو بخونید (حداقل پست اول)

همونطور که می‌دونید ساختار تم‌های وردپرس به صورت تکه‌ای و Partial هست (پارتی نه، پارتیال :D ). یعنی وردپرس در هر قسمت سعی می‌کنه تا با چسبوندن فایل‌های مختلف به هم، صفحه موردنظر کاربر رو رندر و تحویلش بده.

اگه به فولدر ./wp-content/themes/ یه سری بزنید و داخل یکی از پوشه تم‌هاتون بشید، قطعاً متوجه این موضوع می‌شید که چندین فایل با نام‌های مختلف وجود داره، مثلاً فایل content-index مربوط به محتوای ایندکس و فایل 404 به ارور 404 مربوط میشه.

هم‌چنین فایل functions.php و comments.php کارهای به‌خصوصی انجام میدن که باعث هماهنگی بیشتر پوسته شما با سیستم داخی وردپرس میشه. مثلاً قابلیت‌های مربوط به Customizeکردن در فایل functions.php تعریف میشه یا پیکربندی که برخی از پوسته‌ها (اکثراً تجاری) دارن هم در همین بخش تعریف میشه.

به طور کلی، برای داشتن یه پوسته خوب، باید فایل‌های پارتیال و functions.php تکمیل تکمیل باشن. یکی از موانعی که معمولاً سر راه خیلی از دولوپرها* هست، همین قضیه فایل‌های پارتیال و function هست که البته این قسمت کار، کار آسونی هم نیست.

الحمدالله، توسعه‌دهندگان وردپرس بسی به فکر ما هم بودند و این کار رو برای ما آسون کردند.

معرفی Underscores

شرکت آتوماتیک (توسعه‌دهنده وردپرس)، یه تم‌بیس (Theme Base - متفاوت از Child Theme) به ما ارائه داده که فایل‌های پارتیال فوق‌العاده جزیی، functions.php تکمیل‌شده و یه style.css ریسپانسیو با قابلیت‌های خیلی خوبی داره که باعث میشه طراحی یه پوسته از استارت، بسیار بسیار آسون میشه. همچنین به فکر ما فارسی‌زبان هم بودن و فایل rtl.css آماده و بسیار خوبی داره.

خب خب خب، First Things First. برای دانلود Underscores میتونید به سایت اون برید. در بالای صفحه، قسمتی به نام Generate هست. روی Advanced Options کلیک کنید.

فیلد‌های مربوط رو پر کنید. Theme Name نام پوسته شماست، مثلاً من میزارم Tutorial Theme و در قسمت Theme Slug هم میتونید نامک پوسته‌تون رو وارد کنید که من میزارم tutorial-theme.

بقیه فیلدها رو طبق توضیحاتی که داده تکمیل کنید (چندان مهم نیستن اگه هم وارد نکنید، خودش وارد میکنه ;) )

حالا روی Generate کلیک کنید و پوسته‌تون رو تحویل بگیرید. پوسته رو روی یه وردپرس (ترجیحاً روی لوکال، اگه نمیدونید لوکال چیه، به آموزش کسری توی همین انجمن مراجعه کنید) نصب کنید و بعد هم اونو فعال کنید و سایت زیبایتان را تحویل بگیرید :lol:

بله، درنگاه اول بسی در ذوق شما می‌زند، اما خیالتان راحت، تا پایان این آموزش، اونو خوشگلش میکنیم!

خب بعدش؟

ترکیب Underscores با بوت‌استرپ میتونه عالی بشه، اما در این جلسات آموزشی من از Bootstrap به هیچ عنوان استفاده نمیکنم (تکراری، تکراری تکراری).

ولی من، قصد دارم از Simple Grid Framework برای گریدبندی و ریسپانسیو کردن و از خلاقیت خودم برای طراحی UI استفاده کنم.

یه کم با Underscores ور برید، منوها رو ببینید، نگاهی داخل functions.php کنید، تا جلسه بعد!

موفق باشید.

4

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط َDevelop
      سلام!
      راهی برای استفاده رایگان از پوسته های حرفه (Pro) ای Themeisle هست؟!
      پیشاپیش ممنون همچنین سال نو رو هم به همه وردپرسی های عزیز تبریک میگم!
    • توسط kar1591
      با سلام
      سایت وقتی وارد پنل مدیریت میشم و باز میکنم درست نشون میده
      ولی خارج که میشم سایت بهم میریزه
      عکس اول وقتی وارد پنل مدیریت شدم
      عکس دوم بهم ریختگی سایت
      راهنمایی لطفا
      آدرس
      http://hojjat.co/
       


    • توسط Ratinum
      با سلام. بنده یک دسته بندی جدید در سایت ایجاد نمودم که مربوط به محصولات مرتبط با کفشور خطی است و با محصول اصلی سایت که گاتر است متفاوت است. در بخش توضیحات محصول در عنوان به صورت پیش فرض نوشته شده "مشخصات گاتر پیش ساخته" ، چطور می توانم این عنوان را فقط در دسته بندی " کفشور خطی yon.ir/30cnQ  " (لطفا لینک را باز کنید تا متوجه منظور بنده شوید) تغییر دهم، به عنوان مثال بنویسم مشخصات کفشور. لازم به ذکر است میخواهم تغییر مذکور فقط در دسته بندی خاصی ایجاد شود. لطفا راهنمایی فرمایید. با سپاس.
    • توسط MohamamdZarei
      سلام،
      در حال ساخت یک قالب آموزشی هستم. در صفحات دوره، لیست دوره ها رو قرار دادیم که کاربر ( بعد از شرایطی ) بر روی محتوا و درس مورد نظرش کلیک کنه و صفحه به قسمت ویدیوپلیر اسکرول بشه ولینک این درس با لینک قبلی جایگزین بشه ( با js ).
      مشکلمون در حقیقت اینه که اون  "بعد از شرایطی"  رو دقیقا نتونستیم اجرا کنیم. مشکل اینجاست که بعضی از درس های دوره رایگان هستند و همه کاربران ( چه خریدار و چه بازدیدکننده) میتوانند این ویدیو را ببینند. خریدار دوره نیز میتواند همه درس ها را ببیند. برای قرار دادن اطلاعات دروس در صفحه قالب ، از افزونه Advanced Custom Fields و قابلیت Nested Repeaters استفاده شده است. شرط هایی که قرار میدیم همش غلطه
      <ul class="course-accordion"> <?php if( have_rows('chapters') ): ?> <?php while( have_rows('chapters') ): the_row(); ?> <li class="accordion-option opened"> <div class="option-title"><?php the_sub_field('chapter'); ?></div> <div class="option-wrapper"> <ul class="option-items"> <?php if( have_rows('lessons') ): ?> <?php while( have_rows('lessons') ): the_row(); ?> <?php if( have_rows('lesson') ): ?> <?php while( have_rows('lesson') ): the_row(); ?> <li class="option-item"><a><?php if (the_sub_field('Lfree') == "True") { echo '1'; } else { echo '2'; } ?></a> <div class="pull-right"><span class="duration"></span><a href="#"><i class="zmdi zmdi-hc-2x"></i></a> </div> <a href="#"><?php echo the_sub_field('Lname'); ?></a></li> <?php endwhile; ?> <?php endif; ?> <?php endwhile; ?> <?php endif; ?> </ul> </div> </li> <?php endwhile; ?> <?php endif; ?> </ul> Lfree برای هر درس تعیین شده که برای این قرار گرفته که اگه این درس رایگان بود لینکش قابل دسترسی باشه. مشکل اینجاست وقتی مقدار Lfree برای هر درس رو چاپ می کنیم یه عبارت مشخصه. بعد شرط if میزاریم که اگر مساوی با اون عبارت بود... اما همیشه شرط غلط اجرا میشه. بنظرم باید مربوط به حلقه while و اینجور چیزا باشه
      ممنون از پاسختون
    • توسط behnamstar
      سلام و عرض ادب
      من یه سایت وردپرسی دارم که به تازگی تغییر دامنه روش انجام دادم که بعد ازینکار مشکل عجیبی اتفاق افتاده 
      من دامنه ی https://damane1.co m رو ریدایرکت کردم به https://damane2.co m الان اتفاقی که میفته دامنه 1 ریدایرکت میشه روی دامنه 2 
      ولی زیر دامنه ها ریدایرکت نمیشن 
      مثلا روی این لینک کلیک بشه (https://damane1.co m/linksite) باید این لینک باز شه (https://damane2.co m/linksite)
      ولی این لینکها جدا جدا باز میشن 
      فقط دامنه https://damane1.co m روی https://damane2.co m ریدایرکت میشه بقیه ی لینک ها همه جدا جدا باز میشن.
      ممنون میشم از دوستان کمک کنن 
      حتی به هاست پشتیبانی هم تیکت دادم ولی متوجه مشکل نشدن.