تبدیل قالب HTML به وردپرس مرحله دوم طراحی یک قالب وردپرسی است که در دوره جامع آموزش طراحی قالب وردپرس این موضوع رو به صورت کامل توضیح دادیم پس اگر به دنبال یک آموزش صفر تا صد هستید حتماً از این دوره استفاده کنید چون در این دوره طراحی بهترین قالب فروشگاهی رو یاد خواهید گرفت. اما در این آموزش می خواهیم به صورت خیلی خلاصه نحوه تبدیل قالب html به وردپرس رو توضیح دهیم البته دقت کنید که تبدیل قالب html به php منظور همون تبدیل قالب html به وردپرس است چون وردپرس با زبان php نوشته شده است و ما از این زبان برای همگام سازی قالب با وردپرس استفاده می کتیم.

دلیل تبدیل قالب html به وردپرس چیست؟

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

اما اگر تبدیل قالب HTML به وردپرس رو انجام دهید شما دیگه خیلی راحت می تونید تمام بخش های سایت رو از یک داشبود کنترل و مدیریت کنید مثلاً می تونید به راحتی نوشته های خودتون رو منتشر کنید بدون اینکه نیاز باشه وارد کدهای قالب سایت شوید و هزاران مزیت دیگه داره که اگر بخوام براتون بگم باید تا فردا بنویسم اما در کل بدونید شما با تبدیل قالب html به وردپرس قالب سایت خود را داینامیک یا پویا کرده اید.

تبدیل قالب html به ووکامرس

تبدیل قالب html به ووکامرس با تبدیل قالب html به وردپرس تفاوتی ندارد فقط چون افزونه ووکامرس یک فروشگاه ساز برای وردپرس است پس نیاز هست که شما قالب خود را برای این افزونه نیز سازگار کنید البته این موضوع در صورتی است که شما قصد داشته باشید مانند دوره طراحی قالب وردپرس یک سایت فروشگاهی مانند تصویر زیربالا طراحی کنید.

آموزش تبدیل قالب html به php

قبل از تبدیل قالب html به وردپرس شما باید یکسری نکات اساسی رو بدونید تا بتونید درک بهتری از این فرآیند داشته باشید اولین چیزی که باید بدونید ساختار قالب های وردپرسی است یعنی در وردپرس یکسری فایل ها از قبل برای بخش های مختلف مشخص شده که شما باید صفحات خود را به این شکل به وردپرس بفهمونید در ادامه با تصویر مثالی رو توضیح خواهم داد که بهتر متوجه شوید

در تصویر بالا شما شاهد یکسری فایل ها هستید که مربوط به قالب های وردپرسی است و قبل از تبدیل قالب HTML به وردپرس باید با این فایل ها آشنا شوید اگر از بالا بخواهیم شروع کنیم و تک تک فایل هارو توضیح دهیم به شکل زیر است

• پوشه assets : فایل های css و دیگر فایل ها در این پوشه قرار می گیرد که دل به خواهی است
• پوسه fonts : فونت های سایت رو می تونید در این پوشه اضافه کنید
• پوسه lang : ترجمه های سایت در زبان های مختلف در این پوشه قرار می گیرد
• پوشه woocommerce : تمام فایل های ضروری افزونه ووکامرس در این پوشه قرار می گیرد
• فایل 404 : کدهای خطای پیدا نشد یا 404 سایت ها در این فایل قرار می گیرد
• فایل comments.php : کدهای بخش فرم نظرات در این قسمت قرار می گیرد
• فایل footer.php : کدهای فوتر در این بخش قرار می گیرد
• فایل functions.php : توابع php قالب در این فایل قرار می گیرد یک جورایی مغز قالب است
• فایل header.php : کدهای بالای سایت یا هدر در این بخش قرار می گیرد
• فایل home.php : کدهای صفحه اصلی قالب در این فایل قرار می گیرد
• فایل index.php : این فایل جکم تمام فایل های دیگر رو دارد و اگر بخشی رو مشخص نکرده باشید از این فایل فراخوانی می شود
• فایل ltr.css : کدهای چپ چین کردن قالب برای زبان های انگلیسی در این فایل قرار می گیرد
• فایل page.php : کدهای صفحات یا برگه های سایت در این فایل قرار می گیرد
• فایل post.php : تمام کدهای نوشته های سایت رو باید در این بخش قرار دهید
• فایل screenshot.png : تصویر قالب است که در بخش نمایش -> پوسته ها نمایش داده می شود
• فایل sidebar.php : کدهای سایدبار رو باید در این بخش قرار دهید
• فایل single.php : کدهای صفحات تکی مانند صفحه محصولات و صفحه نوشته در این قسمت قرار می گیرد
• فایل style.css : کدهای استایل اصلی قالب رو باید در این فایل قرار دهید
• فایل woocommerce.php : کدهای php مربوط به ووکامرس رو در این فایل اضافه کنید

پس تا اینجای کار ما با تمام فایل های مهم یک قالب وردپرسی برای تبدیل قالب HTML به وردپرس آشنا شدیم حالا می خواهیم وارد جزئیات شویم و نحوه انتقال کدهای html به php رو توضیح دهیم.

تمام تغییراتی که از این به بعد انجام خواهیم داد در پوشه themes وردپرس است یعنی شما باید پوشه قالب html رو به آدرس wp-content/themes کپی کنید یعنی مثلا اگر قالبتون نام پوشه آن kitwp است آن را کلاً کپی کنید و به مسیر گفته شده قرار دهید و آموزش های زیر رو دنبال کنید.

نکته :

تبدیل قالب html به قالب وردپرس

برای شروع تبدیل قالب HTML به وردپرس شما باید کدهای زیر رو در ابتدای فایل style.css قرار دهید دلیل آن هم این است که قالب شما در بخش پوسته های وردپرس نمایش داده شود

/*
Theme Name: نام قالب
Author: نویسنده قالب
Author URI: آدرس سایت نویسنده
Description: توضیحات قالب
Version: 1.0 نسخه قالب مثلا ورژن
License: GNU General Public License v2 or later توضیحات لایسنس
License URI: http://www.gnu.org/licenses/gpl-2.0.html آدرس توضیحات لایسنس
*/

انتقال کدهای html به بخش های مربوطه

حالا نوبت به قرار دادن کدهای html به بخش های مربوطه در آموزش وردپرس رسیده یعنی شما باید تمام کدهای سایدبار رو در فایل مربوطه یعنی فایل sidebar.php قرار دهید. زمانی که شما قالب html می نویسید در فایل index.html یا فایل های دیگه بخش هایی مثل فوتر، هدر و سایدبار تکرار شده است شما می تونید کدهای هر کدوم از این بخش هارو کپی کنید و در فایل مربوط که در بالا هرکدوم رو توضیح دادیم قرار دهید در ادامه مقاله تبدیل قالب HTML به وردپرس نحوه نوشتن کدهای php در بین کدهای html رو توضیح خواهیم داد.

نوشتن کدهای php در بین کدهای html

یکی از قابلیت های فوق العاده زبان php امکان code embedded آن است یعنی شما می تونید ترکیبی از کدهای html و php داشته باشید و در بین کدهای اچ تی ام ال هر جا نیاز داشتید از کدهای پی اچ پی برای داینامیک کردن استفاده کنید اما نکته ای که برای این باید رعایت کنید استفاده از علامت زیر است یعنی تمام کدهای php رو باید در بلاک متنی زیر قرار دهید در غیر اینصورت کدهای شما کار نخواهد کرد

فراخوانی بخش های مختلف سایت در صفحات

بعد از تبدیل قالب html به قالب وردپرس شما نیازی نیست مثل اچ تی ام ال بارها کدهای سایدبار، هدر و… رو در صفحات مختلف کپی کنید کافی است هر جا به هدر نیاز داشتید از تابع زیر استفاده کنید تا کدهای هدر در بخشی که این تابع رو فراخوانی کردید اجرا و نمایش داده شود

کد زیر برای فراخوانی سایدبار استفاده می شود

و کد زیر برای فراخوانی فوتر استفاده می شود

پس بعد از اینکه کدهای html خود را در فایل های sidebar.php, header.php, footer.php قرار دادید دیگه نیازی نیست همون کدهارو در صفحات post.php, page.php و صفحات دیگه کپی کنید فقط کافیه تابعی که خود وردپرس قبلا ایجاد کرده رو مانند بالا که توضیح دادیم در جای درستش فراخوانی کنید.

جمع بندی آموزش تبدیل قالب html به وردپرس

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

منبع: https://kitwp.com/html-to-wordpress/

معرفی افزونه المنتور

افزونه Elementor Page Builder یک افزونه حرفه‌ای و کاربردی در زمینه ساخت صفحات گرافیکی در وردپرس مشابه صفحه‌ساز visual composer است که با استفاده از آن قادر به قرار دادن المان‌ها و اجزای مختلف یک صفحه در کنار هم خواهید بود. این افزونه توانسته است از میان بیش از 5 میلیون نصب فعال خود، امتیاز 5 از 5 را به خود اختصاص دهد. در آموزش المنتور به شما یاد می‌دهیم چگونه صفحات زیبا و جذابی بسازید.

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

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

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

با افزونه المنتور پرو محتوای سایت را بهتر نشان دهید

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

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

پس از نصب بخشی به نام “المنتور” در پیشخوان وردپرس ظاهر می‌شود که تنظیمات مربوط به این افزونه از طریق آن در دسترس است.

آشنایی با امکانات کلی المنتور

بنابراین شما باید سه نکته را در افزونه المنتور رعایت کنید. اول اینکه المنتور از ردیف تشکیل‌شده است و ردیف‌ها از ستون‌ها تشکیل‌شده‌اند. شما در هریک از این ستون‌ها می‌توانید اجزا دلخواه خودتان را قرار دهید. برای تغییر هریک از آیتم‌ها نیز تنها کافی است که روی آن کلیک کنید و تغییر دهید.

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

تولید مجدد فایل CSS: به دلیل اینکه کد های CSS سفارشی افزونه در یک فایل جداگانه ذخیره می‌شوند، می‌توانید با زدن این دکمه، فایل جدید را تولید کنید.

همگام سازی کتابخانه: کتابخانه قالب‌های المنتور هر روز به صورت خودکار بروز رسانی می‌شوند. اما در صورت تمایل می توانید این کتابخانه را با کلیک کردن روی این دکمه به صورت دستی بروز رسانی کنید.

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

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

نحوه کار با صفحه ساز المنتور

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

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

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

منبع : https://bit.ly/36oLX0G