اجتناب از اشتباهات رایج در طراحی قالب وردپرس: راهنمای جامع

اجتناب از اشتباهات رایج در طراحی قالب وردپرس

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

1 – تکرار بی‌مورد: اجتناب از چرخه بی‌پایان کدنویسی

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

به عنوان مثال، به جای استفاده مکرر از get_template_part("portfolio/$name", $slug)، می‌توانید از یک تابع واحد مانند get_portfolio_part($name, $slug) استفاده کنید. این کار، تعداد کدهای تکراری را کاهش می‌دهد و مدیریت کدها را آسان‌تر می‌کند.

2 – بی‌خیالی آینده: پرهیز از پیش‌بینی‌های غیرضروری

estimate- خطای رایج قالب وردپرس
پیش‌بینی آینده را متوقف کنید

انسان‌ها در پیش‌بینی آینده متخصص نیستند و اغلب در این کار دچار اشتباه می‌شوند. توسعه‌دهندگان نیز از این قاعده مستثنی نیستند. فرض کنید می‌خواهید قابلیتی برای نمایش آیکون‌های شبکه‌های اجتماعی در پست‌های خود ایجاد کنید. ممکن است تابعی مانند مثال زیر در نظر بگیرید:

 function has_social_icon($icon) {$icons = get_post_meta(get_the_ID(), 'post_social_icons', true);// do what has to be done with $iconsreturn true;   }

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

3 – بهینه‌سازی نابجا: ریشه بسیاری از مشکلات

کد زیر را در نظر بگیرید:

<?php $post_id = get_the_ID(); // look 'ma - I'm reusing ID, saving 1 function call! $thumb = get_the_post_thumbnail( $post_id, 'large'); // look 'ma - I'm saving another function call! Yay! ?><div id='post-<?php echo $post_id ?>'<?php if( $thumb ): ?><div class='thumbnail'><?php echo $thumb ?></div><?php endif; ?></div>

در این کد، شاید فکر کنید با ذخیره کردن $post_id، یک فراخوانی تابع را ذخیره کرده‌اید. اما این بهینه‌سازی در اکثر مواقع، تاثیری در سرعت بارگذاری صفحه ندارد. در عوض، می‌توانید از کد ساده‌تری استفاده کنید:

 <div id='post-<?php the_ID() ?>'<?php if( has_post_thumbnail() ): ?><div class='thumbnail'><?php the_post_thumbnail('large') ?></div><?php endif; ?></div>

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

4 – اهمال متغیرها: اجتناب از استفاده بیش از حد از متغیرها در فایل‌های قالب

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

استفاده از برخی شرط‌های منطقی ضروری است، اما با حذف هرچه بیشتر متغیرها، می‌توانید خوانایی فایل‌های قالب را به میزان قابل‌توجهی بهبود ببخشید.

به مثال زیر توجه کنید:

<?php $logo_url = false; $thumbnail_url = wp_get_attachment_image_src( get_theme_mod( 'hypthetical_theme_logo' ), 'full' ); if( $thumbnail_url ) { $logo_url = $thumbnail_url[0]; } ?><?php if( $logo_url ): ?><a href='<?php echo esc_url( home_url() ); ?>' title='<?php bloginfo( 'name' ); ?>' class='custom-logo'><img src='<?php echo $logo_url; ?>' /></a><?php endif; ?>

این کد ممکن است مشکلی نداشته باشد، اما وقتی در فایل “header.php” قرار می‌گیرد، کمی نامرتب به نظر می‌رسد. به جای تعریف دو متغیر، می‌توان آن‌ها را در داخل توابع قرار داد. این کار، خوانایی کد را بهبود می‌بخشد.

 <?php if( hypotheme_has_logo() ): ?><a href='<?php echo esc_url( home_url() ); ?>' title='<?php bloginfo( 'name' ); ?>' class='custom-logo'><img src='<?php hypotheme_the_logo_url() ?>' /></a><?php endif; ?>

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

5 – به‌روز بودن: اطمینان از به‌روز بودن همیشگی

update- چگونه از دست خطاهای رایج در قالب وردپرس رها شویم؟
بروز باشیم

وردپرس، مانند هر پلتفرم دیگری، دائماً در حال پیشرفت است. برای جلوگیری از مشکلات و استفاده از بهترین امکانات، باید از به‌روزترین روش‌ها استفاده کنید. به طور دوره‌ای، کدهای خود را بررسی کنید و مطمئن شوید که همچنان از بهترین شیوه‌ها استفاده می‌کنید.

به عنوان مثال، wp_print_styles از وردپرس 3.3 منسوخ شده است، اما همچنان برخی از توسعه‌دهندگان از آن استفاده می‌کنند، در حالی که باید از wp_enqueue_scripts استفاده کنند. با به‌روز بودن، می‌توانید از آخرین ویژگی‌ها و بهینه‌سازی‌ها بهره‌مند شوید.

6 – استفاده از توابع وردپرس: انتخاب بهترین روش

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

 <?php if( has_custom_logo() ): ?><a href='<?php echo esc_url( home_url() ); ?>' title='<?php bloginfo( 'name' ); ?>' class='custom-logo'><img src='<?php the_custom_logo() ?>' /></a><?php endif; ?>

در هنگام طراحی فهرست زیبا، ممکن است از تابع get_next_post برای نمایش نوشته بعدی/قبلی استفاده کنید و کدی شبیه به کد زیر را در قالب خود قرار دهید:

 <?php $next_post = get_next_post(); if (!get_next_post()): ?><a href='<?php echo esc_url( get_permalink( $next_post->ID ) ); ?>'><?php echo esc_attr( $next_post->post_title ); ?></a><?php endif; ?>

این کد کار می‌کند، اما مشکلاتی دارد:

  1. شما مستقیماً به ویژگی‌های شی دسترسی دارید. به جای آن، از تابع get_the_title() استفاده کنید. با استفاده از این تابع، می‌توانید عنوان را به درستی بازیابی کنید، “خصوصی/محافظت‌شده” را اضافه کنید و فیلتر the_title را اعمال کنید.
 // do thisecho get_the_title( $next_post )// instead of this:echo $next_post->post_title
  1. یک تابع وردپرس به نام next_post_link وجود دارد که با استفاده از آن، می‌توانید همه موارد فوق را با یک فراخوانی تابع ساده جایگزین کنید:
 <?php next_post_link() ?>

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

7 – پرهیز از ایجاد فریم‌ورک اختصاصی: دوری از ایده‌های چالش‌برانگیز

web design- طراحی سایت
فریم ورک اختصاصی طراحی نکنیم

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

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

در زیر، چند مشکل احتمالی ایجاد فریم‌ورک شخصی را بررسی می‌کنیم:

مشکلات نگهداری

ایجاد یک فریم‌ورک، به معنای اضافه کردن یک کد پایه اضافی برای حفظ است. اگر این فریم‌ورک در دایرکتوری /inc/me-frame شما قرار داشته باشد، هنگام انتشار یک به‌روزرسانی، باید تمام قالب‌های خود را به‌روز کنید.

ممکن است فکر کنید “من این فریم‌ورک را به‌روزرسانی نمی‌کنم.” اما با رشد شما به عنوان یک توسعه‌دهنده، فریم‌ورک شما نیز رشد می‌کند و تغییر می‌کند. این امر منجر به ناسازگاری با قالب‌های قدیمی شما می‌شود. اگر یک اشکال مهم در نسخه‌های قدیمی فریم‌ورک پیدا کنید، باید بخش‌هایی از تمام قالب‌های خود را بازنویسی کنید یا یک افزونه مخصوص رفع اشکال ایجاد کنید. این یعنی کد بیشتر برای نگهداری.

محدودیت‌های افزونه

به جای سفارشی‌سازی فریم‌ورک، می‌توانید یک افزونه وردپرس ایجاد کنید. قالب باید طرح‌بندی‌های زیبایی ایجاد کند و از آن‌ها استایل بگیرد. فایل‌های قالب باید با پیکربندی کامل شوند. از برچسب‌های الگویی استفاده کنید که افزونه‌ها یا هسته وردپرس ارائه می‌دهند. اگر نیاز به استفاده از کلاس‌های PHP را احساس کردید، احتمالاً باید یک افزونه ایجاد کنید.

به جای ایجاد یک فریم‌ورک، یک افزونه ایجاد کنید. می‌توانید افزونه را به راحتی با قالب‌های خود تنظیم کنید. این کار، نه تنها از ایجاد یک فریم‌ورک جلوگیری می‌کند، بلکه به جامعه متن‌باز نیز کمک می‌کند.

افزایش پیچیدگی

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

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

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

امیدواریم این مقاله به شما در ایجاد قالب‌های عالی و عاری از اشتباهات رایج کمک کند. اگر سوال یا پیشنهادی دارید، لطفاً در بخش نظرات با ما در میان بگذارید.

منابع

  • [منبع 1: Smashing Magazine](https://www.smashingmagazine.com/2018/03/prevent-common-wordpress-theme-mistakes/)
  • [منبع 2: Speckyboy](https://speckyboy.com/avoid-common-wordpress-theme-development-mistakes/)