انجمن برنامه نویسان البرز

تبلیغات

آموزش مقدمات طراحی تم در وردپرس


در ۱۶ جلسه گذشته از مجموعه جلسات آموزش وردپرس به طور کامل کار بار سیستم مدیریت محتوای وردپرس را فرا گرفتیم اکنون میتوانیم یک سایت وردپرس را به طور کامل مدیریت کنیم و همچنین میتوان میتوانیم یک قالب آماده را از ابتدا نصب کرده و آن را با توجه به نیاز خود تغییر دهیم و مدیریت کنیم . از این جلسه به بعد طراحی تم در وردپرس (داینامیک کردن قالب html با وردپرس ) آموزش داده میشود. برای بازدهی بهتر آموزش ها بهتر است مقداری دانش طراحی قالب (Html,css) و کار با وردپرس را بلد باشید. اگر موارد فوق را بلد نیستید اصلا جای نگرانی نیست و ناامید نشود با مراجعه به مقالات آموزش طراحی سایت و  آموزش وردپرس میتوانید به طور کامل این پیشنیازها را یادبگیرید. در ابتدا باید بیان کنم که برای آموزش طراحی تم در وردپرس ما نیاز به یک قالب (html,css) داریم برای همین منظور یک قالب بسیار بسیار ساده آماده کرده ایم تا آموزشها را روی این قالب انجام دهیم . فقط توجه داشته باشید چون تمرکز ما بر روی آموزش طراحی تم در وردپرس و داینامیک کردن سایت میباشد قالب از نظر استایل بسیار ساده است. پس از گذراندن این دوره قالب های پیچیده تر را هم آموزش میدهم. لطفا ابتدا قالب را دانلود کنید. خب حالا میرویم سراغ آموزش!

۱- ابتدا از سایت wp-persian.com  آخرین ورژن وردپرس فارسی را دانلود میکنیم. سپس در میسر زیر یک پوشه به نام پروژه خود میسازیم.

طراحی تم در وردپرس

سپس وردپرس را در این پوشه کپی کرده و نصب میکنیم .

دقت داشته باشید اگر از نرافزار wamp استفاده میکنید در پوشه www باید وردپرس را نصب کنید و اگر از نرم افزار xampp استفاده می کنید باید وردپرس را در پوشه htdocs نصب نماید.

۲- بعد از نصب وردپرس باید یک پک تم درست کنیم حالا سوالی که پیش میاید اینست که پک تم چی هست ؟

ببینید برای طراحی تم وردپرس (داینامیک کردن سایت در وردپرس) ما به یک سری فایل مانند (index.php , header.php , footer.php , functions.php )  و فایل های دیگر نیاز داریم . در ادامه آموزش توضیح میدهم که چرا به این فایل ها نیاز داریم . خیلی از طراحان سایت خودشان به صورت دستی این کار را انجام میدهند و فایل ها را ایجاد میکنند اما من میخوام سایتی را به شما معرفی کنم که خودش تمام فایل های مورد نیاز برای طراحی تم در وردپرس را میسازد. برای این کار وارد سایت underscores.me میشویم و در باکس نام پروژه خود را نوشته و دکمه generate را میزنیم .

طراحی تم در وردپرس

بعد از چند ثانیه یک فایل زیپ به ما میدهد فایل را دانلود میکنیم و سپس در مسیر زیر فایل را پوشه theme وردپرس کپی کرده و از حالت زیپ خارج میکنیم.

طراحی تم در وردپرس

۳- حالا وقت آن رسیده که پوشه های حاوی فایا های css , js و همینطور پوشه عکس ها را از نسخه قالب html در نسخه قالب وردپرسی پروژه کپی کنیم . تا اینجای کار ما به خوبی توانستیم تم پروژه را به نسخه وردپرس خود انتقال دهیم فقط کافیست که تم را فعال کنیم. برای این کار وارد پیشخوان وردپرس شده و از نوار ابزار سمت راست گزینه نمایش انتخاب کرده و وارد بخش پوسته ها میشویم همانطور که میبینید تم پروزه ما در این قسمت پوسته ها قرار گرفته اما فعال نیست برای فعال کردن تم روی تم آمده و گزینه فعال رو میزنیم.

طراحی تم در وردپرس

۴- در این مرحله نوبت این است که تمام کد های فایل index.html به طور کامل در فایل index.php نسخه وردپرسی پروژه کپی کنیم. (از ابتدا تا انتها)

یک نکته ای رو که باید در این قسمت توضیح بدم اینست که در یک سایت قسمت های هستند که در تمام صفحات یا برخی از صفحات تکرار میشوند مانند بخش هدر ، فوتر ، سایدبار(در صورت وجود) یا سرچ … این ها بخش های هستن که معمولا در همه صفحات وجود دارند.هر بار که میخواهیم یک صفحه را داینامیک کنیم باید این قسمت ها را هم داینامیک کنیم که این به معنی انجام یک کار تکراری است . برای جلوگیری از این کار تکراری تمام قسمت های مثلا هدر را در فایل header.php  کپی میکنیم و در همان فایل تمام کدهای php را برای داینامیک کردن هدر مینویسیم و در هر صفحه دیگری که به هدر نیاز داشتیم فقط کافیست فایل header.php را فراخوانی کنیم.(به همین دلیل ما به فایل های که در بالا گفتم نیاز داریم.)

۵- حالا از ابتدا فایل index.php  تا انتهای قسمت هدر را در فایل header.php کپی میکنیم و با و به جای کدهای برداشته شد تکیه دستور زیر را مینویسیم



get_header();?>

با این تکه دستور محتویات فایل header.php فراخوانی میشود.
اگر در پروژه دقت کنید قسمتی که لوگو و منو در آن قرار گرفتند باید در فایل header.php کپی کنیم.

طراحی تم در وردپرس

۶- به همین ترتیب از ابتدا تگ فوتر تا انتهای تگ بسته html را هم به فایل footer.php انتقال میدهیم و بجای کدهای برداشته شده تکه کد زیر را منویسیم



get_footre();

تا اینجای کار کدهای مربوط به قسمت های header , footer و index در فایل های footer.php , header.php , index.php قرار گرفتن حالا اگر سایت را یک بار رفرش کنید تم را میتوانید ببنید اما هیچ کدام از استایل ها و افکتهای جی کوئری نشون داده نمیشوند این مسئله به این خاطر است که آدرس دهی فایل ها در محیط html با محیط php متفاوت است . با تکه کد زیر میتوان آدرس دهی درست را در محیط php انجام داد.


<link href="<?php bloginfo('template_url'); ?>/آدرس فایل">


حالا اگر دوباره سایت را رفرش کنید سایت به طور کامل نمایش داده میشود.
۷- آخرین کاری که در این جلسه باید انجام بدهیم ویرایش شناسنامه یا همان جزیئات تم میباشد. برای اینکار فایل style.css که در روت پروژه قرار دارد را باز میکنم دقت کنید (فایل style.css که در روت قرار دارد نه فایل style.css که در پوشه css وجود دارد. ) در ابتدا فایل مشخصات تم را وارد میکنیم

طراحی تم در وردپرس

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

قالب html را از این قسمت دانلود کنید.html-alborzcode




کلمات کلیدی :

نظر بدهید

یک دیدگاه برای “آموزش مقدمات طراحی تم در وردپرس

  • bahram fetri گفته
    28 می 17

    سلام و خسته نباشید
    استاد من قالب رو دانلود کردم و داخل مسیر گفته شده ریختم اما ولی وارد پوسته های سایت شدم اخطار داد و گفت:
    پوسته با نام html-alborzcode نصب شده اما ناقص(شیوه‌نامه گم شده.)
    این شیوه نامه چیه؟