مقدمه ای بر آناتومی قالب وردپرس
چند وقت پیش مفهوم ایجاد قالب وردپرس از HTML را به شما معرفی کردیم. ما آموزش را به دو بخش تقسیم کردیم و امروز همه ما در مورد این دو آموزش هستیم، بنابراین در صورت تمایل این پست را به عنوان سومین خدمت در مجموعه پست در نظر بگیرید. هدف من این است که تم وردپرس را جدا کنم تا تصویر واضحی از نحوه کار آن (موضوع) به شما ارائه دهم.
این پست فرض می کند که شما دانش کاری HTML و CSS دارید. من ادامه می دهم و اعلام می کنم که داشتن مهارت های HTML و CSS یک پیش نیاز در طراحی قالب های وردپرس است. یک چیز دیگر، این پست از کلمات بزرگ و مفاهیم دشوار پاک خواهد ماند – درک آن آسان خواهد بود، بنابراین آماده باشید تا سرگرم شوید و یاد بگیرید.
آغاز کمی HTML
هر صفحه وب HTML با استفاده از تگ
هنگامی که صفحه وب خود را در بخش‌هایی قرار دادید، می‌توانید با استفاده از CSS بخش‌ها را به دلخواه خود سفارش دهید (یا ترتیب دهید). این فرآیند به عنوان استایلینگ شناخته می‌شود و شامل اضافه کردن عناصر سبک دیگری مانند رنگ، اندازه، حاشیه‌ها، جلوه‌های ویژه و غیره می‌شود. این قدرت CSS است که – اتفاقاً – مخفف Cascading Style Sheets است. وقتی فایل‌های HTMl و CSS خود را کنار هم قرار می‌دهید و چند تصویر می‌اندازید، در نهایت یک وب‌سایت کامل خواهید داشت.
موضوع با تم های وردپرس تفاوت چندانی ندارند. همانطور که در بخش 1 نحوه ایجاد یک قالب وردپرس از HTML، تم های وردپرس به فایل های مختلف تقسیم می شوند. اگر نمی توانید شباهتی را در این مرحله مشاهده کنید، اجازه دهید توضیح دهم.
صفحات وب HTML ایستا با استفاده از تگ‌های
بنابراین، به جای اینکه همه عناصر بدنه (سرصفحه، محتوای اصلی، نوار کناری، پاورقی و غیره) در یک فایل (مانند HTML استاتیک) زندگی کنند، هر یک از عناصر بدن (در قالب‌های وردپرس) در یک فایل زندگی می‌کنند. فایل های جداگانه.
بنابراین، هدر در header.php، نوار کناری خانه در sidebar.php، محتوای اصلی در index.php، یا single.php (اگر یک پست باشد) یا page.php (اگر این یک صفحه است). بخش پاورقی در footer.php و غیره خواهد بود.
آیا دنبال می کنید؟ تصویر زیر را بررسی کنید:
از تصویر بالا، ، و را تگ های قالب می نامند. کار آنها این است که header.php، sidebar.php و footer.php را به ترتیب از فهرست تم شما واکشی می کنند و محتوا را در index.php شما نمایش می دهند، بنابراین صفحه وب را تکمیل می کنند.
اجازه ندهید پسوند .php شما را بترساند، محتوای داخل فایل‌های php فقط کد HTML است که شما با آن آشنا هستید. به عنوان مثال، header.php شما می تواند شامل پیمایش لیست HTML معمولی باشد. به طور مشابه، می توانید کدهای HTML معمولی را در footer.php، sidebar.php و index.php قرار دهید.
همچنین می‌توانید تابع loop.php را در index.php خود (یا هر جایی که دوست دارید) قرار دهید تا پست‌های وبلاگ خود را نمایش دهید، اما من باید سرعتم را کم کنم و به آناتومی قالب‌های وردپرس بازگردم. . من یک یا دو مورد در مورد حلقه در بخش 2 نحوه ایجاد یک تم وردپرس از HTML. و ما در مورد آن (حلقه) و سایر عملکردها در آینده صحبت خواهیم کرد.
در حال حرکت…
یک تم اصلی وردپرس حداقل از چهار فایل قالب تشکیل شده است که عبارتند از:
- index.php
- header.php
- sidebar.php
- footer.php
بیایید ببینیم چه چیزی در هر یک از این فایل‌های جادویی وجود دارد:
فایل قالب Index.php
این فایل اصلی است که بدون آن تم وردپرس کار نمی کند. این اولین (یا پیش فرض) فایلی است که هنگام بازدید از یک وب سایت وردپرس بارگیری می شود. آن را معادل index.html در نظر بگیرید.
یک index.php معمولی در قالب های وردپرس به این صورت خواهد بود:
می توانید حلقه بین و برای نمایش پست های وبلاگ در صفحه اصلی (index.php) همانطور که در زیر نشان داده شده است:
>
" rel="bookmark" title="پیوند دائمی به ">
پرونده قالب Header.php
این فایل های الگو حاوی کد سرصفحه، پیمایش و کد سرفصل HTML شما است. اساسا، header.php هر چیزی را که می خواهید در بالای وب سایت خود نشان دهید ذخیره می کند. می دانید، مواردی مانند عنوان وب سایت شما و مواردی از این قبیل.
شما همچنین به شیوه نامه CSS خود در header.php پیوند می دهید. در اینجا یک مثال اساسی از header.php:
است
<سر>
<?php wp_title( '|', true, 'right' ); ?>
<بدن>
این بخش سرصفحه است. لوگو و سایر جزئیات خود را اینجا قرار دهید.
فایل قالب Sidebar.php
Sidebar.php شامل همه چیزهایی است که برای نمایش در نوار کناری خود نیاز دارید. نوار کناری شامل منوهای اضافی، ویجت‌ها، دسته‌ها، نمادهای رسانه‌های اجتماعی، محتوای سفارشی، کد HTML مانند تبلیغات و غیره است.
Sidebar.php می تواند بسته به نیاز شما حاوی نشانه گذاری HTML خالص یا فراخوانی تابع php باشد. به این ترتیب، یک sidebar.php اصلی ممکن است شبیه به:
باشد
فایل الگو Footer.php
فکر می‌کنید چه چیزی در footer.php وجود دارد؟ شما می توانید اطلاعات حق چاپ خود را در اینجا قرار دهید، منوهای اضافی، پیوندها، نمادهای رسانه های اجتماعی – هر چیزی که می خواهید! آیا می خواهید ببینید که یک footer.php اساسی چگونه به نظر می رسد؟ اینجا:
