آموزش تبدیل قالب HTML به قالب وردپرس
تا امروز با هم از وردپرس خیلی صحبت کرده ایم و آموزش های بسیاری را نیز در این رابطه در وبسایت درج نمودیم. در میان این آموزش ها، جای خالی یک آموزش مهم حس میشد و آن هم آموزش تبدیل قالب HTML به قالب وردپرس و در واقع تبدیل سایت استاتیک به سایت داینامیک بود. در همین راستا، امروز مسترکد تصمیم دارد که به شما روش تبدیل قالب HTML به وردپرس را آموزش دهد. پس از مطالعه ی این آموزش، تنها با کمی تمرین، به سادگی قادر خواهید بود انواع HTML را با وردپرس سازگار کرده و از سایت استاتیک خود، یک سایت داینامیک تمام عیار ایجاد کنید.
در آموزش امروز سعی میکنیم که ساده ترین روش را جهت تبدیل HTML به قالب وردپرس در پیش بگیریم. در تمام مراحل این نکته را در نظر داشته باشید که صرف اینکه ما کاری را به روشی خاص انجام داده ایم، دلیل نمیشود این تنها راه یا صحیح ترین راه باشد. بلکه هدف، حفظ سادگی این آموزش است تا همه ی افراد، چه تازه کار و چه خبره بتوانند از آن بهره بگیرند و با نحوه ی تبدیل قالب های اچ تی ام ال به قالب های وردپرس آشنا شوند.
منابع و ابزارهای مورد نیاز
ابزارها و منابعی که برای انجام این کار نیاز داریم بسیار ساده هستند. پیش از هر چیز به یک قالب HTML نیاز داریم. برای ساده تر کردن فرایند آموزش، قالب HTML ای که در این آموزش مورد استفاده میدهیم را جهت دانلود در اختیار شما نیز قرار داده ایم. قالب را میتوانید از لینک زیر دریافت کنید :
توصیه میکنیم که کار را با همین قالب نمونه شروع کرده و قدم به قدم با مسترکد پیش بروید و بعد از آشنایی با شیوه ی کلی انجام کار، این آموزش را با هر قالب HTML دیگری که مایل هستید تکرار کنید.
ابزار دیگری که مورد نیاز شماست، یک ویرایشگر متنی مناسب است. ما برای انجام این کار، استفاده از نرم افزار بسیار قدرتمند NotePad++ را توصیه میکنیم. نوت پد پلاس پلاس را میتوانید با کلیک بر روی اینجا از سایت رسمی اش دریافت نمایید.
طبعا در ادامه برای مشاهده فایل های HTML به یک مرورگر نیاز خواهید داشت و در نهایت هم برای تست نتیجه ی کار، به یک نصب وردپرس. (توصیه میکنیم برای تست از وردپرس لوکال یا یک نصب خالی استفاده نمایید)
همین … اگر آماده اید میتوانیم دست به کار شویم.
شروع به کار
برای شروع کار، قالب HTML ساده ای مانند شکل زیر در اختیار داریم که کلیه ی بخش های آن کاملا ثابت یا استاتیک است :
اگر قالب نمونه را دریافت کرده اید و ابزارهای شما آماده است از اینجا به بعد، کافی است مراحل را قدم به قدم به همراه مسترکد دنبال کنید.
ایجاد فولدر قالب و ساختن فایل های اولیه
فولدری با نام دلخواه برای قالب وردپرستان ایجاد کنید. در نام فولدر ترجیحا از فاصله استفاده نکنید و سعی کنید کلیه ی حروف کوچک باشند (و طبعا انگلیسی!)
سپس در فولدری که ساخته اید فایل های زیر را ایجاد نمایید :
- index.php
- header.php
- footer.php
- functions.php
- loop.php
- sidebar.php
- style.css
بدیهی است که الزامی نیست یک قالب وردپرس تنها محدود به فایل های بالا باشد. در میان فایل های ذکر شده نیز این امکان وجود دارد که از فایل loop.php و sidebar.php هم صرف نظر کنید ولی جهت مرتب بودن و مشخص بودن بخش های مختلف قالب، ما تصمیم گرفتیم این دو فایل را نیز در ساختار اصلی فایل های قالب خود داشته باشیم.
همچنین جهت سادگی بیشتر میتوانید بجای ایجاد فایل style.css این فایل را از درون فولدر قالب HTML ای که در ابتدا دانلود کرده بودید کپی کرده و در فولدر قالب وردپرس خود پیست کنید.
توجه : حتما همه ی فایل های خود را با اینکودینگ UTF-8 ایجاد کنید. برای انجام این کار در NotePad++ میتوانید از منوی Encoding گزینه ی Encode in UTF-8 یا در نسخه های قدیمی تر، نسخه ی Encode in UTF-8 Without BOM را انتخاب نمایید. اگر در قالبتان علامت های عجیب و غریب مشاهده کردید و یا اگر نوشته های فارسی شما تبدیل به علامت سوال میشد، این مسئله به این مفهوم است که اینکودینگ شما روی UTF-8 تنظیم نشده.
افزودن اطلاعات قالب به فایل Style.css
اگر هنوز فایل style.css شما خالی است، ابتدا محتوای موجود در فایل style.css قالب HTML را کپی کرده و در فایل استایل خود پیست کنید. سپس جهت افزودن اطلاعات قالب به فایل استایل، کد زیر را در بالاترین بخش فایل style.css خود قرار دهید :
1 2 3 4 5 6 7 | /* Theme Name: نام قالب شما Description: توضیحات قالب Version: 1.0 Author: نام نویسنده Author URI: آدرس کامل سایت نویسنده */ |
واضح است که در کد بالا باید اطلاعات مورد نظرتان را جایگزین نوشته های نمونه کنید.
در اینجا لازم میبینم به این نکته هم اشاره کنم که برای استایل های راست به چپ، در قالب های وردپرس از فایل rtl.css استفاده میشود. در این حالت قالب به صورت چند زبانه نیز قابل استفاده خواهد بود. اما در اینجا چون هدف ما تنها ایجاد یک قالب ساده ی وردپرس بوده است، از همان فایل استایل پیشفرض یعنی style.css استفاده کرده ایم.
افزودن اسکرین شات قالب
حتما مشاهده کرده اید که وقتی در وردپرس از منوی نمایش به زیر منوی پوسته ها مراجعه میکنید، قالب هایی که در این بخش به شما نمایش داده میشوند، هر یک دارای یک تصویر پیش نمایش هستند. در این مرحله میخواهیم این تصویر پیش نمایش را در قالب خود قرار دهیم. تصویر مورد نظر باید تصویری با فرمت png و اندازه ی 880 در 660 پیکسل باشد. به سادگی با نرم افزاری مانند Paint یا Photoshop یا هر نرم افزار دیگری که با آن راحت هستید، میتوانید تصویری با این مشخصات و با نمای دلخواه خود ایجاد کرده و در فولدر قالب قرار دهید تا نماینده ی قالب جدیدتان باشد.
جدا کردن کد های HTML و قرار دادن آنها در فایل های مرتبط
حالا وقت آن رسیده که کد های HTML قالبمان را در میان فایل هایی که برای قالب وردپرسمان ایجاد کرده بودیم تقسیم کنیم. قالب HTML ما تنها دارای یک فایل اصلی است. بنابراین این فایل (index.html) را در ویرایشگر متنی خود باز کنید و مطابق راهنمایی که در ادامه درج شده، کد ها را در فایل هایی که قبلا برای قالب وردپرستان ایجاد کرده بودید قرار دهید.
برای فایل header.php :
از ابتدای فایل index.html تا انتهای خط 38 که کد <div class=”content_resize”> در آن درج شده را انتخاب کنید. کد را کپی کرده و در فایل header.php قرار دهید.
برای فایل footer.php :
در فایل index.html از ابتدای خط 61 که کد <div class=”clr”></div> در آن درج شده تا انتهای فایل را کپی کرده و در فایل footer.php قرار دهید.
برای فایل sidebar.php :
از ابتدای خط 48 تا انتهای خط 60 که در یک div با کلاس sidebar درج شده را کپی کرده و در فایل sidebar.php قرار دهید.
برای فایل loop.php :
فایل loop.php در واقع همان حلقه ی نوشته های وردپرس یا محلی است که محتوای یک نوشته یا برگه و … به نمایش در می آید. بنابراین در این فایل باید ناحیه اصلی محتوا را قرار دهیم. برای این کار از ابتدا خط 39 تا انتهای خط 47 که در یک div با کلاس mainbar قرار گرفته را کپی کرده و در این فایل قرار دهید.
برای فایل index.php :
در فایل index.php نوبت آن است که کلیه ی فایل های بالا را که قبلا با کد های مورد نیاز پر کرده ایم، فراخوانی کنیم. برای انجام این کار، کد های زیر را در فایل index.php قرار میدهیم :
1 2 3 4 | <?php get_header(); ?> <?php get_template_part('loop'); ?> <?php get_sidebar(); ?> <?php get_footer(); ?> |
خط اول کد، فایل سربرگ یا header.php را فراخوانی میکند.
خط دوم فایل حلقه یا loop.php را فراخوانی میکند.
و خطوط سوم و چهارم نیز به ترتیب فایل های sidebar.php و footer.php را فراخوانی خواهند کرد.
اگر دقت کرده باشید برای فراخوانی loop.php از کد متفاوتی نسب به سربرگ، سایدبار و فوتر استفاده کرده ایم. این مسئله به این دلیل است که loop.php جزو فایل های ساختار اصلی قالب نیست و تابعی که مستقیما قادر به فراخوانی این فایل باشد، در وردپرس تعریف نشده. بنابراین ما با استفاده از تابع get_template_part به وردپرس گفته ایم بخشی از قالب را که نامش loop است برای ما فراخوانی کن.
کپی کردن منابع مورد نیاز از قالب HTML
اگر توجه کرده باشید قالب HTML ما دارای یک سری منابع مخصوص به خودش، مانند تصاویر، فونت ها و … است. بنابراین در این مرحله باید فولدر هایی که این منابع را در بر گرفته اند، کپی کرده و در فولدر قالب وردپرس خود قرار دهیم. بدیهی است که اگر این فولدر ها را به محل مناسب در قالب وردپرسمان کپی نکنیم، قالب ما فاقد تصاویر و منابع مورد نیاز بوده و نمای آن مشابه نمای قالب HTML نخواهد شد. بنابراین در این مرحله فولدر های images و fonts را از قالب اچ تی ام ال به قالب وردپرستان انتقال دهید.
تکمیل فایل loop.php و قرار دادن متغیر های حلقه ی وردپرس
فایل loop.php ما در حال حاضر شامل کد های استاتیک اچ تی ام ال است. حالا نوبت به آن میرسد که این کد های استاتیک را از این فایل حذف کرده و متغیر های مناسب را در آن جایگزین کنیم. بنابراین محتوای این فایل را مطابق کد های درج شده در زیر تغییر دهید :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <div class="mainbar"> <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="پیوند پایدار به <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <p>ارسال شده توسط <a href="#"><?php the_author(); ?></a> | در دسته بندی <?php echo get_the_category_list( ', ' ); ?></p> <div class="post"> <?php the_content("خواندن ادامه مطلب"); ?> <?php wp_link_pages(); ?> </div> <p><a href="<?php echo get_comments_link(); ?>" class="obg"><?php comments_number( '0', '1', '%' ); ?> دیدگاه</a> | <?php the_time(get_option( 'date_format' )); ?></p> </div> <?php if (is_singular() && comments_open() ) { comments_template(); } ?> <?php endwhile; ?> <?php else : ?> <div class="article"> <p> مطلبی پیدا نشد! </p> </div> <?php endif; ?> </div> |
در کد بالا در خط دوم ابتدا بررسی میکنیم که آیا مطلبی جهت نمایش موجود است یا خیر. اگر مطلب موجود نباشد که یک راست به سراغ خط 26 میرویم و پیام مطلبی پیدا نشد به کاربر نشان داده میشود. در غیر این صورت مادامی که نوشته ای جهت نمایش موجود باشد، اجرای حلقه ی خط 3 ادامه پیدا خواهد کرد. همانطور که در کد بالا نیز مشخص است، عنوان مطلب، نام نویسنده، دسته بندی ها و محتوای پست، هر یک با توابع مربوطه جایگزین شده اند. در خط 9 با استفاده از تابع wp_link_pages در صورتی که مطلب دارای چند صفحه باشد، صفحات مختلف آن به صورت لیست در اختیار کاربر قرار خواهند گرفت. (مثل همین آموزش که چند صفحه ایست.)
سپس در خطوط 14 تا 20 بررسی کرده ایم که اگر در نوشته ها یا برگه ها یا پیوست ها هستیم و اگر نظردهی فعال است، نظرات و فرم نظردهی در سایت نشان داده شود.
فراخوانی صحیح استایل در قالب وردپرس و فراخوانی توابع در سربرگ
اینکه مانند قالب های HTML، استایل خود را در سربرگ قالب فراخوانی کنید، در وردپرس کار صحیحی نیست. روش صحیح فراخوانی استایل ها در وردپرس، افزودن آنها به صف از طریق تابع wp_enqueue_style است. بنابراین فایل functions.php خود را باز کنید. در ابتدای فایل حتما تگ php را باز کنید و سپس کد زیر را در آن قرار دهید :
1 2 3 4 5 | function mrcodeirwp_scripts() { wp_enqueue_style( 'style', get_template_directory_uri().'/style.css', array(), '1.0' ); } add_action( 'wp_enqueue_scripts', 'mrcodeirwp_scripts' ); |
گفتیم تگ php را باز کنید ولی نگفتیم تگ php را ببندید! جدی هم گفتیم و تصمیم هم نداریم این تگ را ببندیم. (وای از مشکلات Whitespace … )
حالا به فایل header.php بروید. از ابتدای فایل تا جایی که تگ head به پایان میرسد یعنی </head> انتخاب کرده وکد زیر را به جای آن قرار دهید :
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html <?php language_attributes(); ?> xmlns="http://www.w3.org/1999/xhtml"> <head> <title><?php bloginfo( 'name' ); wp_title( '-' ); ?></title> <meta charset="<?php bloginfo( 'charset' ); ?>"> <?php if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); } ?> <?php wp_head(); ?> </head> |
خوب، حالا به شرح کد بالا میپردازیم، در خط دوم با تابع language_attributes زبان و جهت زبان را مشخص کرده ایم.
در خط 4، عنوان ثابت درج شده را حذف کرده ایم و کاری کرده ایم که عناوین سایت به صورت داینامیک بر اساس آنچه وردپرس تعیین میکند به نمایش در بیاید.
در خطوط 6 تا 10 امکان پاسخ دهی به نظرات را به شکل استاندارد وردپرس فراهم کرده ایم. یعنی در این حالت وقتی روی لینک پاسخ کلیک کنید، فرم نظردهی دقیقا در زیر نظری که میخواهید به آن پاسخ بدهید به نمایش در خواهد آمد.
در خط 11 تابع بسیار مهم wp_head را قرار داده ایم. کلیه ی استایل ها و هر آنچه وردپرس قرار است در سربرگ سایت شما قرار دهد، از طریق این تابع در این بخش قرار خواهند گرفت. در واقع بدون این تابع، حتی استایلی که به صف اضافه کرده بودید را نیز در قالب مشاهده نخواهید کرد.
رجیستر کردن سایدبار ها و فهرست ها
در وردپرس برای اینکه بتوانیم از سایدبار های و فهرست ها (منوها) استفاده کنیم، ابتدای باید آنها را در قالب خود تعریف یا رجیستر کرده باشیم و محل نمایش آنها را نیز مشخص کرده باشیم. برای انجام این کار کد زیر را به فایل functions.php خود اضافه کنید :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | function mrcodeirwp_register_menus() { register_nav_menus( array( 'top-menu' => 'Top Navigation', 'footer-menu' => 'Footer Navigation', ) ); } add_action( 'init', 'mrcodeirwp_register_menus' ); add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2); function special_nav_class($classes, $item){ if( in_array('current-menu-item', $classes) ){ $classes[] = 'active '; } return $classes; } function mrcodeirwp_register_sidebars() { $args = array( 'name' => 'Main Sidebar', 'description' => 'Main Sidebar', 'before_widget' => '<div class="gadget">', 'after_widget' => '</div><!-- End Widget -->', 'before_title' => '<h2 class="star">', 'after_title' => '</h2>' ); register_sidebar( $args ); $args = array( 'name' => 'Footer Sidebar 1', 'description' => 'Footer Sidebar 1', 'before_widget' => '', 'after_widget' => '<!-- End Widget -->', 'before_title' => '<h2>', 'after_title' => '</h2>' ); register_sidebar( $args ); $args = array( 'name' => 'Footer Sidebar 2', 'description' => 'Footer Sidebar 2', 'before_widget' => '', 'after_widget' => '<!-- End Widget -->', 'before_title' => '<h2>', 'after_title' => '</h2>' ); register_sidebar( $args ); $args = array( 'name' => 'Footer Sidebar 3', 'description' => 'Footer Sidebar 3', 'before_widget' => '', 'after_widget' => '<!-- End Widget -->', 'before_title' => '<h2>', 'after_title' => '</h2>' ); register_sidebar( $args ); } add_action( 'widgets_init', 'mrcodeirwp_register_sidebars' ); |
توجه داشته باشید که تابع special_nav_class در این فایل ارتباطی به رجیستر کردن منو ها یا سایدبار ها ندارد و کار آن مشخص کردن آیتم فعال منو و افزودن کلاس active به آن است تا بعدا بتوانیم از این امکان برای تعریف استایل های خاص برای آیتم های فعال استفاده کنیم.
همانطور که در کد بالا نیز مشخص است، ما مجموعا دو جایگاه منو و 4 جایگاه سایدبار برای قالب تعریف کرده ایم. در میان این جایگاه های سایدبار، یکی مربوط به سایدبار اصلی سمت چپ قالب و سه تای دیگر مربوط به فوتر قالب هستند.
حالا به فایل header.php مراجعه کرده و محتوای درج شده بین تگ <div class=”menu_nav”> را حذف کرده و بجای آن کد زیر را قرار دهید :
1 | <?php wp_nav_menu( array( 'theme_location' => 'top-menu' ) ); ?> |
محتوای موجود در فایل footer.php را نیز به طور کامل با محتوای زیر جایگزین کنید تا منو ها و سایدبار ها در محل صحیح خود به نمایش در بیایند :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <div class="clr"></div> </div> </div> <div class="fbg"> <div class="fbg_resize"> <div class="col c1"> <?php dynamic_sidebar( 'Footer Sidebar 1' ); ?> </div> <div class="col c2"> <?php dynamic_sidebar( 'Footer Sidebar 2' ); ?> </div> <div class="col c3"> <?php dynamic_sidebar( 'Footer Sidebar 3' ); ?> </div> <div class="clr"></div> </div> </div> <div class="footer"> <div class="footer_resize"> <p class="lf">© کپی رایت <?php bloginfo( 'name' ); ?>. ویرایش توسط <a href="https://mrcode.ir/" targe="_blank">مسترکد</a></p> <div class="fmenu"> <?php wp_nav_menu( array( 'theme_location' => 'footer-menu' ) ); ?> </div> <div class="clr"></div> </div> </div> </div> <?php wp_footer(); ?> </body> </html> |
اگر توجه کرده باشید در فایل footer.php در خط 28 تابع wp_footer را درج کرده ایم. این تابع اسکریپت ها و استایل های مربوط به فوتر وردپرس را در قالب شما به نمایش در می آورد. مثلا یکی از کارهای بسیار مهم این تابع نمایش نوار مدیریت وردپرس در سایت شماست. بنابراین توجه کنید که این تابع حتما در محل صحیح خود فراخوانی شده باشد.
در آخر هم فایل sidebar.php را باز کنید، کد های موجود در آن را حذف کرده و جهت نمایش سایدبار مربوط به این ناحیه، کد زیر را در آن قرار دهید :
1 2 3 | <div class="sidebar"> <?php dynamic_sidebar( 'Main Sidebar' ); ?> </div> |
اصلاح جستجو و تنظیم آن برای استفاده در وردپرس
اگر توجه کرده باشید، در سربرگ قالبمان یک باکس برای جستجو داشتیم. این باکس برای اینکه به درستی در وردپرس کار کند، نیاز به اندکی تغییر دارد. بنابراین فایل header.php خود را باز کنید و فرم جستجو را به شکل زیر تغییر دهید (حوالی خط های 21 تا 28)
1 2 3 4 5 6 7 8 | <div class="searchform"> <form id="formsearch" name="formsearch" method="get" action="<?php echo site_url(); ?>"> <input src="<?php echo get_template_directory_uri();?>/images/search_btn.gif" class="button_search" type="image" /> <span> <input name="s" class="editbox_search" id="editbox_search" maxlength="80" value="جستجو" type="text" /> </span> </form> </div> |
در واقع اصل کاری که در کد بالا انجام داده ایم، تعیین آدرس action و تغییر method به get در خط دوم و همچنین تغییر مقدار name به s در خط پنجم کد است. همچنین برای اینکه تصویر ذره بین نیز به درستی بارگذاری شود، با استفاده از تابع get_template_directory_uri آدرس کامل آن را در بخش src قرار داده ایم.
این هم نمایی از قالب ما پس از تبدیل شدن به نسخه ی وردپرسی :
تغییر عنوان و توضیحات نمایش داده شده در سربرگ سایت
حالا میخواهیم کاری کنیم که عنوان و توضیحی که در بخش سورمه ای رنگ سربرگ به نمایش در می آید نیز به صورت داینامیک بر اساس اطلاعات درج شده در تنظیمات وردپرس شما تغییر کند. برای انجام این کار کافی است فایل header.php را باز کرده بخش مربوط به لوگو را که از حوالی خط 30 شروع میشود به شکل زیر اصلاح کنید :
1 2 3 4 | <div class="logo"> <h1><a href="<?php echo site_url(); ?>"><?php bloginfo( 'name' ); ?><br /> <small><?php bloginfo( 'description' ); ?></small></a></h1> </div> |
سخنان پایانی
به طور کلی ممکن است از ذکر کردن برخی تغییرات جزئی مانند درج کلاس های پست یا درج کلاس های بدنه در این آموزش صرف نظر کرده باشیم ولی کلیه ی این موارد را میتوانید در قالب وردپرس نهایی که در زیر جهت دانلود در دسترس شماست، به طور کامل مشاهده و بررسی کنید :
همچنین در هر بخش اگر بر اساس خطوط ذکر شده قادر به پیدا کردن محل کد مورد نظر نبودید، کافی است به قالب تبدیل شده ای که دریافت کردید مراجعه کنید تا بتوانید محل دقیق کد ها را یافته و از نحوه ی درج صحیح آنها آگاهی پیدا کنید.
یک نکته را هم به یاد داشته باشید، قالب html ای که در این آموزش به قالب وردپرس تبدیل کردیم، امکان استفاده از منو های چند مرحله ای را ندارد، بنابراین در این قالب همیشه از یک سطح منو استفاده کنید. به یاد داشته باشید که گرچه در این قالب از نمایش سطوح دوم به بعد منو ها جلوگیری نکرده ایم ولی وظیفه ی طراح است که از بهم ریختگی قالب جلوگیری به عمل آورد. بنابراین در صورتی که قالبی طراحی کردید که بخشی از آن از منو های چند مرحله ای پشتیبانی نمیکند، فراموش نکنید که از طریق css، نمایش زیر منو ها را در آن محل خاص غیر فعال نمایید.
اگر در جایی از این آموزش سوالی برایتان پیش آمد یا به مشکلی برخورد کردید، در بخش دیدگاه ها در خدمت شما هستیم.
مطمئنا از آموزش امروز لذت برده اید …. !
در پایان خواندن مطالب زیر را نیز به شما توصیه میکنیم :
راهنمای راستچین کردن قالب وردپرس
با سلام
از مطالب آموزشی که قرار دادید بینهایت سپاسگذارم من دنبال همچین موردیی بودم
که بندرت در سایتهای دیگه میشه پیدا کرد واقعا سایت بینظیری دارید
ممنون وسپاس فراوان
از اینکه از نوع مطالب رضایت دارید بسیار خوشحالم. انشالله موفق باشید.
با سلام مجدد
ممنون از پاسخ سریعتان
یک سوالی داشتم در مورد قالبهای HTML های وبلاگی مثلا رز بلاگ که فقط کد HTML وجود دارد
و فاقد style.css ,image,font. هستند چطور میتوانیم این فایلها را بدست آوریم.
ضمنا من در این کار مبتدی هستم.
با سپاس موفق و پایدار باشید
البته من اطلاعی راجع به قالب سیستم های وبلاگدهی ندارم ولی به هر حال فایل استایل یا باید جدا باشه و جایی آپلود شده باشه و در قالب فراخوانی شده باشه، یا در تگ <style> توی خود فایل html تعریف شده باشه و یا اینکه به طور کامل اینلاین باشه. از این سه حالت خارج نیست.
تصاویر هم چه در خود فایل html و چه در فایل استایل، باید دارای آدرس باشن. حال ممکنه آدرس نسبی یا کامل باشه که دیگه باید خودتون بررسی کنید …
تشکر از لطفتان
سلام خسته نباشید من یه قالب برای خودم طراحی کردم اومدم با اموزش های شما تبدیل به وردپرسش کنم ولی کاملا گیج شدم و من فایل لوپ ندارم راهنماییم کنید با تشکر
سلام
واضحه که این فایل رو ندارید. دقیقا ما در مرحله ی اول آموزش توضیح دادیم که این فایل ها رو بسازید. اگر آموزش رو با دقت مطالعه کنید متوجه میشید.
با سلام دوباره میشه بفرمایید من چه طور کلاس لوپ رو بنویسیم اگر اموزشو قرار دارید لینکشو برارم بزارید
با تشکر
شما توی آموزش هستید! همه چیز هم توضیح داده شده که اگر وقت بزارید و بخونید متوجه میشید …
آموزش دو صفحه ایه که فکر کنم شما صفحه ی دوم رو بهش مراجعه نکردید چون جواب همه ی سوالاتتون توی این دو صفحه هست.
سلام
ببخشید من یک قالب html نوشتم الان فایلهای پوت استرپشو اینا رو چیکار کنم؟ این قالب 3 تا صفحه داره واسه هر صفحه اش ام استایل هاش رو جدا نوشتم یعنی یک استایل کلی و هر صفحه برای خودش جدا
سلام
من برای اولین بار دارم با وردپرس کار میکنم
وردپرس رو نصب کردم کل پوشه وردپرس رو تووی پوشه htdocs گذاشتم اما نمیدونم این پوشه ای که ساختم رو کجا باید بزارم تا توابع رو بشناسه و بصورت وردپرس ببینتش
لطفا راهنمایی بفرمایید. متشکرم
متاسفانه من متوجه منظورتون نمیشم.
اگر سوالتون اینه که چطور روی وردپرس قالب نصب کنید، آموزش زیر رو مطالعه کنید :
http://mrcode.ir/?p=1002
بله منظورم همین بود… متشکرم
سلام ببخشید برای قسمت مطلبی پیدا نشد باید صفحه جداگانه ای طراحی بشه یا خیر
و قالبم تبدیل میکنم همه چی بهم میرزه هدر سایدبار فوتر هم تو هم میره از این کد هم استفاده کردم درست نشد
<?php bloginfo('stylesheet_url'); ?>
ممنون میشم راهنمایی بفرمایید
با تشکر
1 – داشتن صفحه ی 404 اختصاصی الزامی نیست. ولی خوب برای زیبایی بیشتر و امکان سفارشی سازی این صفحه، اگر دلتون بخواد میتونید یک صفحه ی 404 با فرمت php ایجاد کنید و در اون محتوای مورد نیاز رو وارد کنید.
2 – در صفحه ی دوم آموزش، نحوه ی enqueue کردن استایل هارو در قالب آموزش دادیم. اگر به طور کامل این بخش رو دنبال کردید و قالبتون هنوز نمیتونه فایل استایلشو پیدا کنه، با ابزار developer کروم سایتتون رو چک کنید ببینید کجا دنبال استایل میگرده. اینطوری یه سر نخی دستتون میاد که از کجا باید شروع به رفع مشکل کنید.
از طرفی هم شاید مشکل از فراخوانی استایل نباشه … ممکنه مشکل نامگذاری کلاس ها و … باشه. به هر حال با ابزار توسعه کروم میتونید این رو متوجه بشید.
سلام خیلی ممنون امیدوارم جواب بگیرم با تشکر
سلام ببخشید من سایدبار قالبمو با table نوشتم چه طوری باید ابزارکیش کنم هر چی کد هاشو دست کاری میکنم سایدبار بهم میرزه
من دقیقا نمیدونم ساختار کدتون چی هست. و تجربه ی به اون صورت هم از کار با جداول برای طراحی ندارم. ولی فرضا اگر سایدبارتون خودش یک جدول باشه، ابزارک هاش میشن ردیفهای جدول …
ولی اینطور بهتون بگم که در حال حاضر طراحی یک قالب با تیبل، فقط و فقط برای قالب های ایمیل کاربرد داره و کاری که انجام دادید کاملا منسوخ هست.
البته کمی هم برای من عجیبه که اصلا چرا طراحیتون رو بر میبنای جدول انجام دادید چون طراحی با div ها واقعا 1000 بار ساده تر از روشی هست که انتخاب کردید.
سلام بله دایو بهتره پشیمون شدم با تیبل انجام دادم اخه تو دایو تغییر مکان دایو مشکلاتی پیدا کردم به خاطر این با تیبل انجام دادم
سلام ببخشید الان قالبمو کامل تبدیل کردم اون قسمت سایدبارم با دایو نوشتم تبدیلش کردم
ولی یه مشکلی هست وقتی تو سایتم یه سایدربار به قالب اضافه میشه قسمت loop من یا همون پست میره پایین کلا بهم میرزه میشه بفرمایید مشکل از کجاست با تشکر
یا استایلهاتون مشکل داره و یا کد html ای که استفاده میکنید. طبعا باید خودتون بررسی کنید …
سلام ببخشید بنده همه چیز سایتمو تونستم تبدیل کنم به جز بخش loop که این بخش قالبم فکر میکنم کلا مشکل طراحی داره اساسی میشه اگه امکانش هست طراحی بخش loop اول به صورت اچ تی ام ال و سی اس اس اگر در سایت موجود هست لینکشو برام قرار دهید با تشکر از زحمات شما
کد مربوط به html و css بخش حلقه و به طور کلی کلیه ی قسمت های قالب، بر اساس هر قالبی که استفاده کنید متفاوته و نمیشه کد ثابتی برای این بخش ارائه کرد. قالب استفاده شده در این آموزش و کلیه ی بخش های اون، به طور کامل در همین آموزش قابل دریافت و استفاده هستند که میتونید با استفاده از اونها نحوه ی صحیح ایجاد بخش های مختلف قالب رو یاد بگیرید.
در مورد کد نویسی php هم که اگر توابع رو به صورت صحیحی که در آموزش اعلام شده مورد استفاده قرار بدید، مشکلی نخواهید داشت.
سلام جناب معذرت میخوام برای من بخش فوتر وقتی سایىبار چند تا اضافه میکنم به سایدبار برخورد میکنم چه طوری این مشکل حل بشه اصوالا در فایل footer.php چه کد های پی اچ پی قرار بگیرد خیلی متشکر میشوم توضیح بدهید با سپاس
اگر منظورتون اینه که با اضافه کردن چندین ابزارک به ناحیه فوتر، نمایش این بخش دچار مشکل میشه باید حالت های زیر رو در نظر بگیرید :
1 – عرض فوترتون رو باید در فایل استایلتون مشخص کنید.
2 – در نظر بگیرید که چند ناحیه ابزارک میخواید در فوتر داشته باشید و بر همون اساس ستون هایی با اندازه ی متناسب در فوتر ایجاد کنید. (با استفاده از div). اگر مایل نیستید وقت زیادی رو صرف اندازه گیری ها کنید بهتره از فریم ورکی مثل bootstrap استفاده کنید که اندازه های از پیش تعیین شده ای رو برای تقسیمات مختلف در اختیارتون قرار میده.
3 – padding ها رو در اندازه گیری در نظر بگیرید و اگر میخواید اندازه ی نهایی یک باکس دقیقا همون چیزی باشه که براش تعیین کردید (یعنی مقدار padding ها و border به سایز باکس اضافه نشن) مقدار box-sizing رو برابر border-box قرار بدید.
پاسخ سوالی که در رابطه با کد های php پرسیدید در آموزش موجوده اما به طور کلی تمامی بخش های فوتر بجز صدا کردن تابع wp_footer() کاملا اختیاری هستند. یعنی فوتر میتونه بجز کد اچ تی ام ال هیچی نداشته باشه، ولی تابع wp_footer() نباید فراموش بشه.
سلام خیلی متشکرم از پاسختون
با سلام
من یه فایل اچ تی ام ال دارم که در اون فرمی هستش به شکل زیر :
http://uupload.ir/files/v8by_screenshot_2016-08-13_13.49.48.png
و می خوام که در وردپرس فراخوانی بکنم به این ترتیب که کاربران عضو شده وارد این صفحه شده و اطلاعاتی که ازشون خواسته شده را پر بکنند و سپس این اطلاعات ثبت بشه.من چطوری می تونم این کار رو انجام بدم با ابزاری مثل پروپنل و ای پنل که مدیریت در وردپرس ایجاد می کنند شدنی هست؟
با تشکر
سلام
به طور کلی برای ایجاد فرم در وردپرس باید از افزونه های مخصوص این کار استفاده کنید.
یک نمونه از این فرم ساز ها افزونه ی Gravity Forms هست. توی لینک زیر میتونید یک نگاهی بهش بندازید :
https://market.mrcode.ir/?p=4902
سلام
من درست مثل شما فایل استایل رو فراخوانی کردم ولی باز استایل برخی جاها فراخوانی نمیشه
مثلا استایل کل سایت میاد ولی استایل بخش منو سایت نمیاد
این مشکل وقتی حل میشه که استایل رو به صورت زیر فراخوانی میکنم ..
<link href="http://up.hypertemp.ir/up/hypertemp/Hyper_Temp/samane_ver1/style.css" rel="stylesheet">
که اینم باعث میشه تا سرعت لود سایت زیاد بشه
چیکار کنم به نظرتون؟
سلام
فایل CSS رو اگر درست فراخوانی کرده باشید و فایل دارای استایل های صحیح باشه، غیر ممکنه استایل ها کار نکنن. بدون شک چیزی رو از قلم انداختید و یا جایی رو اشتباه انجام میدید.
از طرفی هم این آدرسی که دادید اصلا از نوع آدرس دهی و ساختار فایل وردپرس پیروی نمیکنه.
و در آخر، درسته که فراخوانی استاتیک فایل استایل در قالب وردپرس اشتباه هست ولی این مسئله هیچ ارتباطی به بالا رفتن سرعت لود سایت نداره.
حرف شما کاملا درسته من خودم از این موضوع تعجب میکنم ولی وقتی جر این روش که در بالا گفتم فراخوانی میکنم قالب دچار مشکل میشه برای مثال استایل منو و اسلایدر نمیاد ولی وقتی دوباره فراخوانی رو به شکلی که گفتم انجام میدم درست میشه
<link href="http://up.hypertemp.ir/up/hypertemp/Hyper_Temp/samane_ver1/style.css" rel="stylesheet">
حتی وقتی از روش پایین هم استفاده میکنم بازم مشکل میاد
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet">
اول یک نکته، استایل هاتون رو با فرمت کامل صدا کنید :
<link rel='stylesheet' href='#' type='text/css' media='all' />
و دوم، خوب الان سوال این میشه که وقتی شما کد زیر رو برای فراخوانی استایل استفاده میکنید :
bloginfo('stylesheet_url')
خروجی ای که توی head سایت ایجاد میکنه چیه؟
و سوال دیگه، وقتی از شیوه ی استانداردی که توی آموزش ذکر شده استفاده میکنید، اون موقع استایل به چه صورتی توی head قالب میاد؟
این سوال آخر رو به این جهت میپرسم که شما آدرس فایل استایلتون هیچ تطابقی با وردپرس نداره. مطمئنید دارید روی وردپرس کار میکنید؟ یعنی یه وقت احیانا قالب رو به صورت مستقیم توی یک محیط اجرای php بدون نصب وردپرس صدا نمیکنید؟
بله همان طور که در نکته اول گفتید استایل رو با فرمت کامل صدا زدم یعنی به شکل های زیر
<link rel='stylesheet' href='<?php bloginfo('stylesheet_url'); ?>' type='text/css' media='all' />
و
<link rel='stylesheet' href='<?php bloginfo('template_url'); ?>/style.css' type='text/css' media='all' />
فراخوانی میکنم یعنی هر دوتای این ها را امتحان کردم ولی استایل کلی اومد ولی استایل منو ها و اسلایدر نیومد
و درست مثل اون روش استانداردی که گفتید شد یعنی درست همان نکات که در روش شما استایل نداشت در روش های بالا که انجام دادم هم نداشت
و این قالب مخصوص روزبلاگ بوده که به صورت اچ تی ام ال است و من ان را میخواهم به وردپرس تبدیل کنم و قبلا هم بارها این کار را بر روی قالب های دیگه انجام داده ام و قالب کاملا درست شده ولی روی این قالب نمیشه
و من تمام اسکریپت ها و فایل های جی اس رو هم درست فراخوانی کردم و اون ها کار میکنه ولی این استایل نه
دوست عزیز، توی این لینک هایی که ارسال کردید، نه سایتتون وردپرسی هست و نه قالبتون تبدیل شده به وردپرس!
شرمنده ولی من اصلا متوجه نمیشم چطور انتظار دارید روی محیطی که وردپرس نیست، توابع وردپرس رو صدا کنید و این توابع کار کنن.
شاید هم اطلاعات بنده در این زمینه کافی نیست …
سلام خسته نباشید
بنده یه مشکلی دارم تو قسمت فوتر سایتم یه امکان تو قسمت فوتر سایتم بزارم به این منظو ر که اخرین مطالب سایت رو تو فوتر نمایش بده هر مطلبی که مینوسم چه طور این امکان باید فراهم بشه که هر مطلبی که نوشتم تو اون قسمت عنو انش قرار بگیره و همچنین مطالب زیاد باشه حجمش از فوتر بیرون نیاد خودش کنترل کن چه کد پی اچ پی باید استفاده کنم
متشکرم از شما
سلام
از ابزارک نوشته های تازه که به صورت پیشفرض در وردپرس موجوده استفاده کنید.
سلام خسته نباشید
ببخشید سوالی داشتم چه طور میتوانم صفحه index.php رو به صفحه single.php
لینک کنم یعنی وقتی رو ادامه مطلب کلیک کردم به صفحه single.php منتقل بشه
با تشکر
سلام
single.php استفادش به این صورت نیست که شما بیاید چیزی رو بهش منتقل کنید یا صفحه ای رو باهاش باز کنید. در صورتی که طراحی/کدنویسی قالبتون رو به صورت صحیح انجام بدید، وردپرس خودش میدونه که قالب نوشته های تکی / لینک ادامه مطلب رو باید از فایل single.php فراخوانی کنه. ولی شما آدرس این فایل رو هیچوقت توی url تون نخواهید دید.
سلام مرسی متوجه شدم متشکر از پاسختون یک دنیا سپاس
خواهش میکنم. براتون آرزوی موفقیت میکنم
با سلام
ممنون بابت آموزش خوبتون .
موفق باشید
ممنون از لطف شما
سلام خسته نباشید
بخوام سایدبار ها زیر هم چاپ بشه باید چیکار کنم
امتحان کردم بغل هم چاپ میشه
ممنون میشم کمک کنید
سلام
فکر کنم منظورتون اینه که ابزارکهاتون در سایدبار زیر هم قرار بگیرن. نه؟
اگر منظورتون همینه، این مسئله به استایل css تون برمیگرده. سایز سایدبار باید با ابزارکهای داخلش تناسب داشته باشه و همچنین برای wrapper ابزارکها هم float، نوع display صحیح و اندازه ی مناسب تعیین کرده باشید.
سلام بله منظورم همین بود
من در داخل سایدبار عنصر رو فلوت کردم به سمت راست از طرفی بخش کانتنت رو هم فلوت کردم به طرف راست تا اندازه اش درست بشه
من اینجا دو تا عنصر فلوت دارم برای این که بخش کانتنت با فوتر برخورد نکنه خاصیت clear رو برابر با both قرار دادم که عنصر های بعدی رو فلوت در نظر نگیره ولی برای سایدبار نمیدونم چیکار کنم
اگه سایتتون رو اینترنت در دسترسه میتونید لینکش رو بدید یه نگاهی بکنم ببینم مشکلش در مورد سایدبار چیه.
سلام نه شرمنده این سایتی که داشتم روش کار میکردم برای تست هستش و لوکال هستش ولی میتونم عکسشو بفرستم ممنون میشم ایمیلتونو در اختیارم بزارید با تشکر
دیدن عکسش که تاثیری نداره …
با سلام
خوده فایل اصلی شو در اختیارتون قرار بدم مشکلی ندارید به صورت زیپ هست
سلام
این لینکی که به عنوان سایت اینجا درج کرده بودید برای من خود زدگیگ رو نشون میده. گفتم شاید اینجا گذاشته باشید.
روی همین هاست های رایگان آپلود کنید و یه نمونه سایت باهاش بالا بیارید بهتره. دیگه اینجوری لازم نیست زیپش رو هم به من بدید.
سلام
اون لینک زگیگ برای تقریبا چند ماه پیش بود که الان بهش دسترسی ندارم یعنی خوده زگیگ سایت رو بستش
الانم متاسفانه دیگه هر سایتی میرم هاست های رایگان درست و حسابی نمیدن کلی مشکل داره
واقعا نمیدونم چیکار کنم
سلام معذرت میخوام باز مزاحم شدم
ادرس سایتمو گزاشتم ولی تو قالب من نمیدونم چرا مطالب من رو نشون نمیده
به صورت علامت سوال نشون میده مطلب مینوسم داخلش
متشکر میشم راهنمایی کنید
سلام
1 – چک کنید که تک تک فایل های قالبتون حتما دارای اینکودینگ utf-8 باشن.
2 – از فارسی بودن وردپرستون هم اطمینان حاصل کنید.
سلام ببخشید همه رو با فایل utf-8
ذخیره کردم ولی باز همون خطا به احتمال زیاد وردپرس من فارسی نیست چون قالب دیگه ای هم امتحان کردم قالب اماده از سایت وردپرس همون مشکل رو داشت چه طور باید از فارسی بودن وردپرس اطمینان حاصل پیدا کنم
ممنون از شما
سلام
یا وردپرس رو از ابتدا به زبان فارسی نصب کنید و یا در بخش تنظیمات > همگانی زبان سایت رو روی فارسی قرار بدید.
سلام از بخش همگانی زبان فارسی رو انتخاب کردم الان پیشخوان من فارسی هستش ولی نمیدونم چرا متن هارو اینجوری نشون میده منظورت از ابتدا نصب کردن وردپرس اول در بخش لوکال هاست هست اونم به صورت فارسی نصب کردم
بعد از اینکه این کارهارو انجام دادید، آیا نوشته ی جدیدی برای تست ارسال کردید؟ اگر نکردید این کارو بکنید، شاید کارتون نتیجه داده باشه.
خارج از این اگر مشکلتون حل نشده باشه تنها چیزی که به ذهن من میرسه اینه که charset دیتابیستون اشتباه هست که البته یه مقدار بعید میدونم اینطور باشه. ولی به هر حال میتونید چک کنید. charset تون باید حتما از گروه utf-8 باشه. (معمولا باید utf8mb4_unicode_ci باشه)
سلام بله نوشته جدید ارسال کردم که این علامت میاد دیگه
آخرین احتمالی که به ذهنم میرسید رو توی کامنت قبلی خدمتتون عرض کردم.
بجز این موارد با توجه به اینه گفته بودید با قالب های دیفالت هم همین مشکل رو دارید، راه حل دیگه ای به ذهن من نمیرسه متاسفانه.
سلام باشه دست شما درد نکنه از سایت خوبتون خیلی خیلی متشکرم سپاس
ممنون از شما. براتون آرزوی موفقیت میکنم.
سلام
این آموزش برای این قالب اچ تی ام ال شما بود برای سایر قالب ها چه خط هایی از index.html را در فایل header.php قرار بدیم ؟
سلام
این سوال پاسخ ثابتی نداره و پاسخش بر اساس طراحی قالب شما متفاوت هست. بنابراین پیش از شروع میبایست آشنایی مناسبی با ساختار یک صفحه ی استاندارد html داشته باشید.
به عنوان مثال در این آموزش ما اومدیم و تمامی کد های قبل از محتوای اصلی برگه رو در سربرگ قرار دادیم (شامل خود کد هایی که برای ساختار یک صفحه ی html استاندارد لازم هستند، استایلها، خود سربرگ، منوی اصلی، فرم جستجو و …) بنابراین در واقع این تقسیم بندی بر عهده ی شماست و تصمیم اینکه دقیقا تا چه بخشی از کد ها در فایل header.php شما باشند هم با شماست و بر اساس ساختار قالب html ای که تبدیل میکنید و چیزی که برای پیاده ساز مد نظرتون هست باید ببینید چه نوع تقسیم بندی مناسب شماست.
به فایل header.php اینطور نگاه کنید که این یک محتوای تکرارشوندست که در بالای همه ی صفحاتتون قرار میگیره. و اینطور در نظر بگیرید که کد های header.php بخشی از پازلی هستند که وقتی در کنار فایلهای دیگه قرار میگیرن میبایست ساختار فایل رو به صورت صحیح تکمیل کنند. (به عنوان مثال وقتی div ای در پایان فایل header.php باز شده، حتما باید در یکی از فایل های دیگه ی قالب که این پازل رو تکمیل میکنه مثل footer.php بسته بشه و همینطوری در حالت باز به حال خودش رها نشه) فکر میکنم اینجوری تصمیم گیری راجع به این بخش ساده تر باشه.
سلام خسته نباشید.ممنون بابات آموزش خوبتون
برای ویرایش قالب به فایل index.html و single.html نیاز داریم یا نه!
من یه قالب دارم این 2 تا فایل رو نداره.باید چکار کنم
سلام
در قالب html تون فایل index.html رو منطقا باید داشته باشید. اگر ندارید نظری ندارم … باید ببینید صفحه ی اصلی قالبتون چیه. ولی نیازی به داشتن فایلی با نام single.html ندارید.
البته این آموزش در رابطه با ویرایش قالب نیست.
سلام خسته نباشید
یک سوالی داشتم اگر بخواهم به تصویر شاخص یه اندازه دلخواهی بدم که این اندازه دلخواه ثابت برای تمام تصاویر شاخص باشد یعنی هر تصویر شاخصی که داخل سایت میزارم این اندازه دلخواه رو به صورت پیشرض داشته باشه باید چیکار کنم کلی سایت رو چک کردم نتونستم پیدا کنم.
با تشکر از شما
سلام
راهنمای کاملی در این زمینه در لینک زیر قابل مشاهده هست :
https://developer.wordpress.org/reference/functions/add_image_size/
سلام خسته نباشید ببخشید راستیتش من انگلیسی اونقدر مسلط نیستم اگه منبع فارسی باشه خیلی بهتره
متشکر میشم منبع فارسی قرار بدید با تشکر
سلام
با عرض شرمندگی چون از منابع فارسی استفاده نمیکنم اطلاعی در این زمینه ندارم. فکر میکنم بهتر باشه در این رابطه در گوگل جستجو کنید.
سلام متشکرم از شما مشکلم حل شد
انشالله موفق باشید
سلام ببخشید بخوام فایل slider.php رو تبدیل کنم به پی اچ پی اصول تبدیلش چی هستش با تشکر
سلام
قالب وردپرس به صورت استاندارد چنین فایلی نداره.
سلام دوستان من قالبم وردپرسی و فرم ورک بوت استرپ 3 هست چرا گالری لایت باکس برا عکس نمیتونم بزارم هر کار میکنم فعال نمیشه و عکسها ساده و بدون افکت هستن بنظرم لینکای js پروژم غیر فعال شدن ولی هرکارمیکنم ایراد رو پیدانمیکنم تاحالا ۴تا گالری مختلف رو تست کردم ولی بیفایده است در حالیکه پلاگینای دیگه داخل قالبم هستن که فایلاشون رو لینک کردم و کارمیکنن
لطفا دوستان کمک کنید و یا اگه نیازه فایل زیپ شده رو بفرستم بگین شاید مشکل حل بشه انشالله
منتظر کمکتون هستم ممنون
سلام
2 تا نکته رو مد نظر داشته باشید.
1 – اطمینان حاصل کنید که فایل های js مربوطه رو بعد از جی کوئری بارگذاری کرده باشید. قبل از لود کامل جی کوئری این توابع کار نخواهند کرد.
2 – اگر احیانا از روش استاندارد وردپرس برای اضافه کردن فایل های جاوااسکریپت استفاده نکردید (enqueue) چک کنید یک وقت فایلهای js رو به عنوان استایل صدا نکرده باشید. یعنی فایل های js باید با تگ script در قالب قرار گرفته باشن.
در آخر هم بهترین کار اینه که چک کنید ببینید وقتی روی تصویری که قراره در لایت باکس باز بشه، کلیک میکنید، مرورگر در کنسول developer چه خطایی نمایش میده. این ساده ترین راه حل برای پیدا کردن منشا مشکلتون خواهد بود.
ببخشید یک سوال داشتم .اگه جوابم بدید ممنون میشم.
من اگه بخوام قالب بوت استرپ رو به قالب وردپرس تبدیل کنم همین اموزش کافی هستش؟
منظورم اینه که با تبدیل قالب html به وردپرس فرقی نداره؟امیدوارم تونسته باشم منظورم رو بگم.
خسته نباشید
به طور کلی اصول کار به همین شکلی هست که در این آموزش شرح دادیم. اما اگر منظورتون این هست که آیا میتونید قدم به قدم از روی همین آموزش جلو برید و قالبی که خودتون انتخاب کردید رو از HTML به وردپرس تبدیل کنید، در واقع جواب منفیه. چون این آموزش به این شکل طراحی شده که شما رو با اصول کار آشنا کنه تا بعد شما بتونید بر اساس نیازتون تبدیل یک قالب رو از html به وردپرس انجام بدید و مراحل این آموزش بر اساس فایل های نمونه ای نوشته شدند که جهت دانلود در اختیارتون قرار گرفته.
با اینسپکت روی عکس از بخش کنسول این ارور داره
TypeError: $(…).rebox is not a function[Learn More]
The Web Console logging API (console.log, console.info, console.warn, console.error) has been disabled by a script on this page
و ار بخش نت ورک هک فقط لینکهای css هستن و هیچ js نیست
ببخشید امکانش هست فایل زیپ شده رو بفرستم؟دیگه کاری از دستم برنمیاد موندم ایرادش کجاست
شما احتمالا یه جایی قبل از اینکه فایل های مورد نیازتون لود بشن دارید تابع مورد نظر رو صدا میکنید و یا اینکه باید شکل صدا کردن تابع رو تغییر بدید. یه نمونش رو میتونید توی لینک زیر ببینید :
http://stackoverflow.com/questions/4472528/javascript-jquery-closure-function-syntax
و البته چون سوالتون مرتبط با این آموزش نیست بهتر هست سوالتون رو در جایی مثل stackoverflow مطرح کنید و کدهاتون رو هم درج کنید تا در عیب یابی و رفع خطا بهتون کمک کنن.
سلام معذرت میخوام باز مزاحم شدم
یک سوالی داشتم یک افزونه اسلایدر تهیه کردم تنظیماتشو د اخل پیشخوان سایتم انجام میدم بعدش افزونه یک تکه کد بهم تحویل میده اون تیکه کد رو تو کد های سایتم قرار میدم اسلایدری که ساختم نمایش نمیده برای این کار نمایش بده باید کار خاصی انجام بدیم منظورم قالبو افزونه خور مثلا بکنیم قالبم ابزارک خور هستش ولی نمیدونم چرا این عمل نمیکنه تو یکی از قالب های پیش فرض وردپرس عمل کرد متشکر میشم منو راهنمایی کنید با تشکر
سلام خسته نباشید
پاسخی برای این سوالی که پرسیدم دریافت نکردم از سایت خوب شما ممنون میشم رسیدگی بفرمایید با تشکر
سلام
با توجه به اینکه از محیط سایت و نحوه ی پیاده سازی قالب و کارکرد کدتون اطلاعی ندارم نظر خاصی نمیتونم بدم.
تنها چیزی که میتونم بگم اینه که اگر افزونه ی مورد نظر بهتون کد php داده که هیچ ولی اگر بهتون shortcode داده، این shortcode رو نباید مستقیما در قالب بزارید و برای قرار دادنش در کد قالب باید از تابع do_shortcode استفاده کنید :
https://developer.wordpress.org/reference/functions/do_shortcode/
سلام
فرض بر اینکه در قالب html منوهای ما این خط باشه
الان کد فراخوانی رو کجا باید بذارم که کلاس ها و استایل ها هم فراخوانی بشن؟
سلام
بلاک ul و li رو بردارید بجاش منو رو فراخوانی کنید.
فراخوانی منو ارتباطی به فراخوانی استایل ها نداره.
اخه یکی از class ها اینطوری نوشته شده
اینم باید کلا حذف کنم؟
<ul class="sf-menu">
بله باید حذفش کنید. لینک زیر رو یه نگاهی بندازید، توضیح داده شده که چطور کلاس دلخواه رو به منو اضافه کنید :
https://wordpress.org/support/topic/menu-ul-class/
اگه بخواهیم بیشتر از یک فایل سی اس اس اضافه کنیم چیکار باید کنیم؟
همون کد رو که دادید رو 2 بار قرار دادم ولی صفحه سایت سفید شد
تابع wp_enqueue_style رو میتونید به دفعات دلخواه برای فراخوانی استایل های مختلف صدا کنید. اطلاعات بیشتر :
https://mrcode.ir/?p=3937
من به این روشی که تو مقاله شما بود عمل کردم ولی بازم درست فراخوانی نشد و سایت به این شکل دراومد
اگه دقیقا همین کدی که ارسال کرده بودید رو در فایل مورد نظر قرار دادید مشکلتون اینه که استایل ها رو دو بار فراخوانی کردید. یعنی یک ست تکراری استایل در بخش اول کدتون دارید.
به هر حال وقتی مشکل صفحه سفید پیش میاد شما باید اول یه کاری کنید که سایتتون بهتون بگه خطا چیه تا بتونید بر اساس همون اقدام کنید. راهنمای رفع مشکل صفحه سفید :
https://mrcode.ir/?p=2262
سلام و خسته نباشید
ممنون بابت آموزش خوبتون
دوتا سوال داشتم
1- چطور میشه منو چند مرحله ای رو برای این قالب درست کرد ؟
اگر نمیشود
2-در کجای css نمایش زیرمنوها را غیرفعال کنیم ؟
ممنون
سلام
1 – اگر میخواید منوی دراپ داون داشته باشید، استایل های متناسب با منوی دراپ داون باید در فایل css شما تعریف شده باشه. در این حالت وقتی وردپرس خروجی منوی دراپ داون ایجاد میکنه، منو از استایلهای شما پیروی کرده و به حالت دراپ داون در میاد. آموزش ایجاد منوی دراپ داون css رو میتونید در لینک زیر مطالعه کنید :
https://mrcode.ir/?p=4718
2 – برای مخفی کردن یک عنصر میشه از ویژگی display:none برای اون عنصر استفاده کرد. راهنمای این ویژگی در صفحه زیر در دسترسه :
http://www.w3schools.com/css/css_display_visibility.asp
در واقع استایل مورد نیازتون برای مخفی کردن زیرمنو ها در این قالب اینطوری میشه :
.menu_nav ul ul {
display:none;
}
یک دنیا ممنون بابت توضیح جامع و کاملتون
سلام خسته نباشید ببخشید سوالی دارم
میخواستم یک فروشگاه اینترنتی درست کنم اما با قالب اختصاصی یعنی خودم بزنم بعدش با ووکاموس درستش کنم باید چیکار کنم میشه راهنمایی بفرمایید
سلام
اول که طبعا طراحی اولیه قالب رو با توجه به نیازهای یک سایت فروشگاهی انجام بدید. بعد طبعا باید قالب رو تبدیل به قالب وردپرس بکنید و برای هماهنگ کردنش با ووکامرس هم میتونید از اسناد خود ووکامرس استفاده کنید :
https://docs.woocommerce.com/document/third-party-custom-theme-compatibility/
سلام و خسته نباشید بابت سایت خو بتون
من چگونه می تونم اسلایدر سایت HTML رو به PHP تبدیل کنم با آموزش شما تقریبا تمام سایتم فراخوانی شد بجز اسلایدر اگر راهی هست لطفا کمک کنید !
سلام
در صورتی که میخواید اسلایدرتون از طریق وردپرس قابل کنترل باشه میبایست از افزونه های مخصوص این کار استفاده کنید. مثل Revolution Slider و …
سلام
ببخشید میخوام بدونم برای آوردن این کدها توی پستاتون از چه برنامه ای استفاده میکنید که اسکرول قرار میده و کدها رو کامل نشون میده
سلام
ما از افزونه Crayon Syntax Highlighter استفاده میکنیم.
خسته نباشید
من میخوام با استفاده از html,css یک منو درست کنم که تو حالت پیش فرض فقط یک آیکن دیده بشه وقتی روی آیکن کلیک کردم منو ،باز بشه.مثل اکثر سایتا که الان ازش استفاده میکنن مخصوصا واسه ریسپانسیو دستگاه موبایل.
ممنون میشم راهنماییم کنید
برای ساختن منوهای ریسپانسیو میتونید از SlickNav استفاده کنید :
http://slicknav.com
البته اگر جستجو کنید موارد مشابه دیگه ای رو هم پیدا میکنید که بسته به نیازتون میتونید هر یک رو که مناسب تر میدونید مورد استفاده قرار بدید.
سلام میتونم bootstrap خلاق و ajax هم تبدیل کنم به ورد پرس ؟ مشکل پیش نمیاره ؟
متوجه سوالتون نمیشم با عرض شرمندگی.
سلام من یه قالبی درست کردم ولی کلا یه چند جا گنگ موندم در تبدیل اگه میشه به ایمیل ژیام بدین من قالبو بفرستم راهنماییم کنید !
آخه یکم فرق میکنه قالب من ممنونم
این نمای کلی قالب من
میشه بگین چیزایی که باید اضافه کنم چیان !
http://uupload.ir/files/0mo_untitled.png
سلام خسته نباشید فایل js رو چجوری باید متصل کرد مثل css؟؟
سلام
آموزش کامل اضافه کردن فایل های css و js به قالب وردپرس رو میتونید در زیر مطالعه کنید :
https://mrcode.ir/?p=3937
سلام
این کدی که شما گفتید باعث میشه فرم نظردهی دقیقا در زیر نظری که میخواهید به آن پاسخ بدهید به نمایش درمیاد رو من تو قالبم گذاشتم ولی این اتفاق نیفتاد… یعنی هر بار که میخوام کامنت بزارم اولا صفحه رفرش میشه، دوما جای فرم کامنت اصلا تغییری نمیکنه و زیر همه کامنت ها باقی میمونه..
اشکال از کجاست؟
سلام
متاسفانه نظر خاصی نمیتونم بدم چون این مسئله ممکنه دلایل مختلفی داشته باشه.
ممکنه جای کد اشتباه باشه. یا ممکنه مشکلی در فرم نظراتتون داشته باشید. ممکنه فایل جاوااسکریپت مربوطه بارگذاری نشده باشه. ممکنه تداخلی در کدهای جاوااسکریپت قالبتون داشته باشید و بسیاری موارد دیگه …
سلام. ممنون از آموزشتون
سلام
من یه قالب html طراحی کردم و آن رو به وردپرس تبدیل کردم و در این قالب من دو ستون مختلف دارم که مستقل از هم هستند و می خوام نوشته های متفاوتی در آن ها قرار بدم.متاسفانه هر نوشته جدیدی که اضافه می کنم،توی هردو ستون نمایان میشه!ممنون میشم که راهنمایی ام کنید.
سلام
یک روش برای این کار میتونه به این صورت باشه که خودتون در کدنویسی قالب، در هر ستون، نوشته های دسته بندی خاصی رو صدا کنید.
روش اول روشی ابتدایی هست و چون باید دسته های دلخواه رو به صورت ثابت در کدتون بزارید، زیاد روش جالب و استانداردی نیست.
و اما روش دوم این هست که مثل بسیاری از قالب های استاندارد فعلی، برای قالبتون پنل مدیریتی ایجاد کنید و بعد تنظیمی برای هر ستون در پنل مدیریتی قرار بدید. کاربر میتونه در پنل مدیریتی دسته یا تگ دلخواه (یا حتی گروهی از نوشته ها) رو برای هر ستون انتخاب کنه و سپس ستون مورد نظر، آپشن تنظیم شده در پنل مدیریتی رو میخونه و بر اون اساس محتوای تعیین شده رو به نمایش میزاره.
داداش چطوری میشه یه صفحه اچ دی ام ال شبیه اون بالایی روانتقال بدم به ورد پرس
از اینکه این مطالب رو گذاشتین خیلی ممنون هستم .
راستی بنده الان کد tml زدم چطوری اون رو رو قالب پیاده کنم ؟