آموزش وردپرس: نحوه ایجاد یک موضوع وردپرس از HTML (قسمت 1)

  1. 1. در حال خواندن: آموزش وردپرس: نحوه ایجاد یک موضوع وردپرس از HTML (قسمت 1)
  2. 2. آموزش وردپرس: نحوه ایجاد یک موضوع وردپرس از HTML (قسمت 2)
  3. 3. معرفی به آناتومی یک موضوع وردپرس

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


یا شاید اینگونه نباشد. شاید شما فقط سؤال می کنید که چگونه می توانید طراحی HTML مشتری را به یک موضوع کاملاً وردپرس تبدیل کنید. یا شاید شما مایل هستید که برنامه نویسی اصلی WordPress (+ PHP) را از طرف HTML آشناتر با آن یاد بگیرید.

به هر دلیلی که امروز در اینجا هستید ، هر چه باشد ، این آموزش وردپرس شما را با اصول ایجاد یک موضوع وردپرس از HTML آشنا می کند. شما می توانید این راهنما را دنبال کنید تا موضوع خود را از ابتدا ایجاد کنید یا می توانید به سمت Github بروید و مبحث شروع WPExplorer را که یک “بوم خالی” فراهم می کند ، برای ایجاد موضوع خود با تمام فایلها و کدهای الگوی لازم برای شروع استفاده کنید. بنابراین اگر شما جزو آن دسته از افرادی هستید که به جای خواندن از طریق کد یاد می گیرید ، سپس موضوع استارت را بارگیری کنید ، راهنما را پرش کنید و ببینید که چطور کار می کند … در غیر این صورت ، ویرایشگر کد را تهیه کنید (من استفاده می کنم و توصیه می کنم دفترچه یادداشت++, یا SublimeText) و یک مرورگر آماده است ، سپس این راهنمای ساده را تا انتها دنبال کنید.

نامگذاری وردپرس خود را

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

مفروضات عمومی در این مرحله:

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

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

/ *
نام موضوع: نام موضوع شما
URI موضوع: URL موضوع شما
توضیحات: شرح مختصری از موضوع شما
نسخه: 1.0 یا هر نسخه دیگری که می خواهید
نویسنده: نام شما یا نام کاربری WordPress.org
URI نویسنده: آدرس وب شما
برچسب ها: برچسب ها برای یافتن موضوع خود در مخزن تم وردپرس
* /

برچسب های نظر (/ *… * /) را کنار نگذارید. تغییرات را ذخیره کنید. این اطلاعات به وردپرس می گوید نام موضوع شما ، نویسنده و مطالب تعریف شده مانند آن. بخش مهم نام موضوع است که به شما امکان می دهد موضوع خود را از طریق داشبورد WP انتخاب و فعال کنید.

قالب HTML خود را به پرونده های PHP تبدیل کنید

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

مرحله بعدی شامل ایجاد چهار پرونده PHP است. با استفاده از ویرایشگر کد خود ، index.php ، header.php ، sidebar.php و footer.php ایجاد کنید و آنها را در پوشه تم خود ذخیره کنید. همه پرونده ها در این مرحله خالی هستند ، بنابراین انتظار ندارید که آنها کاری انجام دهند. برای اهداف تصویر سازی ، من از فایل های فهرست زیر index.html و CSS استفاده می کنم:

INDEX.HTML




نحوه تبدیل الگوی HTML به قالب وردپرس - WPExplorer



این بخش هدر است. آرم و سایر جزئیات خود را در اینجا قرار دهید.

این منطقه محتوای اصلی است.

و این پاورقی است.

برگه CSS

#wrap {حاشیه: 0 خودکار؛ عرض: 95٪؛ حاشیه بالا: -10px؛ ارتفاع: 100٪؛}
.عرض هدر: 99.8٪؛ مرز: 1px جامد # 999؛ ارتفاع: 135px؛؛
.عرض content عرض: 70٪؛ مرز: 1px جامد # 999؛ حاشیه بالا: 5px؛
.نوار کناری {float: right؛ margin-top: -54px؛ عرض: 29٪؛ مرز: 1px جامد # 999؛}
.پاورقی {عرض: 99.8؛ ؛ مرز: 1px جامد # 999 ؛ حاشیه بالا: 10px ؛}

اگر کاری برای کار کردن ندارید می توانید هر دو کد را بگیرید. فقط آنها را در ویرایشگر کد خود کپی کنید ، آنها را ذخیره کنید ، چهار فایل پی اچ پی را که اخیراً ذکر کردیم ایجاد کنید و برای قسمت بعدی آماده شوید. تازه ایجاد شده (و خالی) را باز کنید header.php. وارد نصب وردپرس موجود خود شوید و به آن بروید ظاهر – >> ویرایشگر و باز header.php. تمام کد را بین کپی کنید برچسب گذاری کرده و آن را در پرونده header.php خود قرار دهید. در زیر کد من از فایل header.php در موضوع بیست و چهارده دریافت کردم:




<?php wp_title( '|', true, 'right' ); ?>




سپس خود را باز کنید index.html کد هدر (یعنی کد موجود در کد پرونده را کپی کرده و کپی کنید

بخش) به header.php شما دقیقاً زیر برچسب ها به شرح زیر:




<?php wp_title( '|', true, 'right' ); ?>







این بخش هدر است. آرم و سایر جزئیات خود را در اینجا قرار دهید.

سپس اضافه کنید…

… در هر نقطه بین در پرونده header.php برچسب گذاری کنید تا صفحه سبک شما پیوند یابد. به یاد داشته باشید که قرار دهید و همانطور که در بالا نشان داده شد ، برچسب ها را در header.php باز کنید. همه تغییرات را ذخیره کنید.

بخش دوم را کپی کنید (یعنی.

از index.html تا به تازگی ایجاد شده index.php , و اضافه کنید …

… در بالا و …


… به انتهای مطلق این سه خط header.php ، sidebar.php و footer.php (به این ترتیب) را می گیرند و آنها را در index.php نمایش می دهند ، که کد شما را به هم باز می گرداند. همه تغییرات را ذخیره کنید در این مرحله ، فایل index.php شما باید به صورت زیر باشد:



سپس مطالب را از بخش های نوار کناری و پاورقی در index.html خود به ترتیب در sidebar.php و footer.php کپی کنید..

افزودن پست

الگوی HTML شما در حال شکل گیری در قالب وردپرس است. فقط باید پست های شما را اضافه کنیم اگر پست هایی در وبلاگ خود دارید ، چگونه می توانید آنها را در قالب “HTML به وردپرس” ساخته شده نمایش دهید؟ شما از نوع خاصی از عملکرد PHP استفاده می کنید که به آن معروف است حلقه. Loop فقط یک قطعه تخصصی کد است که در هر کجا که می توانید پست ها و نظرات خود را نمایش دهید.

اکنون ، برای نمایش پست های خود در بخش محتوا از الگوی index.php ، کد زیر را بین کپی و چسباندن کنید

و

برچسب ها به شرح زیر:

>

این مراقبت از پست های شما خواهد بود. آسان به عنوان ABC. در این بخش (و با استفاده از پرونده های نمونه ارائه شده در این آموزش) ، header.php شما باید مانند این باشد:




<?php wp_title( '|', true, 'right' ); ?>




sidebar.php شما باید به صورت زیر باشد:

footer.php شما باید به صورت زیر باشد:

و این پاورقی است

آیا متوجه بسته شدن شدید و برچسب ها در پاورقی؟ فراموش نکنید که موارد آن را نیز فراموش کنید.

Style.css شما باید چیزی شبیه به این باشد:

/ *
نام موضوع: ایجاد قالب وردپرس از HTML
موضوع URI: http://wpexplorer.com
توضیحات: این موضوع نحوه ایجاد تم های وردپرس را از HTML به شما نشان می دهد
نسخه: 1.0
نویسنده: فردی برایWPExplorer
نویسنده URI: http://WPExplorer.com/create-wordpress-theme-html-1/
برچسب ها: wpexplorer، تم سفارشی، HTML به وردپرس، ایجاد موضوع وردپرس
* /
بدن {
font-family: arial، helvetica، verdana؛
اندازه قلم: 0.8em؛
عرض: 100٪؛
ارتفاع: 100٪؛
}

.سرتیتر {
پس زمینه-رنگ: # 1be؛
حاشیه سمت چپ: 14٪؛
بالا: 0؛
عرض مرز: 0.1em؛
مرز-رنگ: # 999؛
به سبک مرزی: جامد؛
عرض: 72٪؛
ارتفاع: 250px؛
}

.محتوا {
پس زمینه-رنگ: # 999؛
حاشیه سمت چپ: 14٪؛
margin-top: 5px؛
شناور به سمت چپ؛
عرض: 46٪؛
عرض مرز: 0.1em؛
مرز-رنگ: # 999؛
به سبک مرزی: جامد؛
}

.نوار کناری {
پس زمینه-رنگ: # 1d5؛
حاشیه سمت راست: 14٪؛
margin-top: 5px؛
شناور: درست؛
عرض مرز: 0.1em؛
مرز-رنگ: # 999؛
به سبک مرزی: جامد؛
بالا: 180px؛
عرض: 23٪؛
}

.پاورقی {
پس زمینه-رنگ: قرمز؛
حاشیه سمت چپ: 14٪؛
شناور به سمت چپ؛
margin-top: 5px؛
عرض: 72٪؛
ارتفاع: 50px؛
عرض مرز: 0.1em؛
مرز-رنگ: # 999؛
به سبک مرزی: جامد؛
}

و index.php شما باید شبیه به:





مجددا – این مبتنی بر وب سایت چپ به راست با هدر ، محتوا ، نوار کناری ، طرح صفحه است. شما دنبال می کنید؟ همه پنج پرونده باید در پوشه تم شما ذخیره شوند. پوشه مورد نظر خود را نامگذاری کرده و با استفاده از WinRar یا یک برنامه معادل آن را در بایگانی ZIP فشرده کنید. موضوع جدید خود را در نصب وردپرس خود بارگذاری کنید ، آن را فعال کنید و موضوع تبدیل شده خود را در عمل مشاهده کنید!

این آسان بود ، درست است؟ شما می توانید موضوع خود را هر چند که می خواهید سبک کنید اما بیشتر ویژگی هایی که ما در وردپرس دوست داریم هنوز غیرفعال هستند … این آموزش اصول مبانی تبدیل قالب های HTML به وردپرس را شامل می شود و باید برای شما به عنوان یک مبتدی از اهمیت بسیاری برخوردار باشد. در آموزش بعدی ، موارد را بالاتر می بریم و با سایر جنبه های برنامه نویسی وردپرس (مانند پرونده های قالب و برچسب های قالب) که به شما امکان می دهد الگوهای HTML خود را به هر روشی که دوست دارید تبدیل کنید. گوش به زنگ باشید!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map