سپس باید فایل را دانلود کنید عرض کامل.phpدر پوشه تم وردپرس خود با .

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

به داشبورد بروید و یک صفحه جدید را ویرایش یا ایجاد کنید.

در صفحه ویرایش صفحه، کادر بررسی ویژگی های صفحه را بیابید و روی منوی کشویی زیر گزینه Model کلیک کنید.

شما می توانید مدل خود را ببینید. پیش بروید، آن را انتخاب کنید و صفحه را ذخیره یا تازه کنید.

اکنون می توانید از وب سایت خود بازدید کنید و خواهید دید که نوارهای کناری از بین رفته اند و صفحه شما به صورت یک صفحه تک ستونی نشان داده می شود. ممکن است هنوز پر نشده باشد، اما اکنون آماده هستید تا آن را به روشی متفاوت توزیع کنید.

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

شما باید از ابزار Inspect برای کشف کلاس‌های CSS که تم شما برای تعریف ناحیه محتوا استفاده می‌کند، استفاده کنید.

سپس می توانید عرض آن را با استفاده از CSS به 100٪ تنظیم کنید. ما از کد CSS زیر استفاده کردیم:

.page-template fullwidth zone.content(width: 100%; Margin: 0px; border: 0px; padding: 0px; ) .page-template fullwidth.Output(حاشیه: 0px; )

Twenty Seventeen به این شکل خواهد بود.

این همه چیز برای این آموزش است، امیدوارم به شما امکان ایجاد صفحات در اندازه کامل را بدهد.

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

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

شما می توانید از دیگر افزونه های وردپرس برای ارائه ظاهری مدرن و ساده سازی مدیریت وبلاگ یا وب سایت خود استفاده کنید.

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

1. Divi Builder

Divi Builder یک صفحه ساز با کیفیت بالا است که بسیار مورد توجه قرار گرفته است تم های زیبااگرچه معمولاً به عنوان بخشی از قالب وردپرس Divi استفاده می شود، اما Divi Builder یک افزونه مستقل است که می تواند در سایر قالب های وردپرس نیز استفاده شود.

Divi Builder به شما این امکان را می دهد که محتوای خود را با استفاده از یک رابط بصری در قسمت جلویی و همچنین یک رابط سمت سرور ویرایش کنید، اگرچه اکثر کاربران حالت اول را ترجیح می دهند.

اساسا، به جای نوارهای کناری، همه چیز در پنجره های بازشو و دکمه های شناور است. این به شما امکان دسترسی به 316 قالب از پیش تعریف شده را می دهد که در 40 بسته ارائه مختلف توزیع شده اند و همچنین به شما امکان می دهد طرح های خود را به عنوان الگو ذخیره کنید.

ما شما را به افتتاح دعوت می کنیم

یکی از ویژگی های Divi همیشه کنترل بر سبک هایی است که به شما می دهد. در سه تب مختلف، می‌توانید گزینه‌های مختلفی از جمله کنترل‌های پاسخ‌گو، فاصله سفارشی و موارد دیگر را تنظیم کنید.

حتی می‌توانید CSS سفارشی اضافه کنید زیرا ویرایشگر CSS آن اعتبارسنجی اولیه و تکمیل خودکار را ترکیب می‌کند.یکی از انتقادات به Divi Builder همیشه این بوده است که بر اساس .. یعنی اگر یک بار آن را غیرفعال کنید، یکسری کد کوتاه در محتوای خود خواهید داشت. اگرچه کمی ناامید کننده است، اما اکنون مشکلات کمتری در مورد افزونه هایی مانند Shortcode Cleaner وجود دارد.

2. سازنده

جای تعجب نیست که Themify Builder پیشنهاد تیم Themify است. آن را در بسیاری از تم های وردپرس خود ادغام می کند تا گزینه های سفارشی سازی آسان را به مشتریان ارائه دهد. اما می توانید آن را به عنوان یک افزونه مستقل نیز خریداری کنید و با هر قالب وردپرس از آن استفاده کنید.

مانند Divi Builder و WPBakery Page Builder، Themify Builder به شما اجازه می دهد تا طرح بندی ها را در قسمت جلو یا باطن ایجاد کنید.نکته خوب دیگر این است که این افزونه به شما امکان می دهد نقاط شکست پاسخگو خود را سفارشی کنید (اما فقط در سطح سایت).

کشف کنید یک فروشگاه آنلاین ایجاد کنید و به راحتی محصولات خود را به صورت آنلاین بفروشید

یکی از ویژگی های جالب Themify Builder این است که همچنان به شما امکان می دهد از ویرایشگر استاندارد وردپرس استفاده کنید در حالی که سایر صفحه سازها شما را مجبور می کنند از رابط صفحه ساز برای همه چیز استفاده کنید.

3. فاکر

پلاگین وردپرس Elementor که در ابتدا در سال 2016 راه اندازی شد، یکی از جوان ترین توسعه دهندگان این لیست است. علیرغم راه اندازی دیرهنگام، Elementor به سرعت بیش از 1,000,000 نصب فعال در WordPress.org جمع آوری کرده است و آن را به یکی از محبوب ترین سازندگان وردپرس تبدیل کرده است.

اگر پیشنهاد یا نظری دارید، لطفاً آنها را در بخش ما مطرح کنید

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

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

نحوه ویرایش قالب وردپرس

تغییر عرض قالب در وردپرس

نحوه تغییر اندازه قالب وردپرس

نحوه تغییر رنگ قالب وردپرس

نحوه تغییر فونت در قالب وردپرس

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

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

به قسمت Appearance - Customize می رویم و صفحه اصلی سایت و تنظیمات موجود سایت را در سمت چپ صفحه مشاهده می کنیم. در میان آنها، ممکن است تنظیمات طراحی وجود داشته باشد.

به عنوان مثال، بیایید سعی کنیم رنگ بندی سایت را تغییر دهیم. به منوی Colors رفته و پس زمینه قسمت های کناری و مرکزی سایت را تغییر می دهیم.

همانطور که می بینید، این بسیار راحت است و تغییر رنگ یک قالب وردپرس بسیار ساده است - ما بلافاصله نتیجه را می بینیم و می توانیم آن را ارزیابی کنیم.

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

بنابراین، ما نیاز داریم که اغلب فقط یک فایل را ویرایش کنیم - این فایل سبک style.css است. در پوشه تم شما قرار دارد. بیایید به عنوان مثال رنگ فونت را تغییر دهیم. به هر حال، شما می توانید این کار را مستقیماً از پنل مدیریت وردپرس انجام دهید. فقط مراقب باشید و مراقب باشید که به طور تصادفی سایت را "شکستن" نکنید. بهتر است قبل از ایجاد هر تغییری در موضوع خود از آن نسخه پشتیبان تهیه کنید. بنابراین، به منوی Appearance - Editor بروید و به طور پیش فرض باید فایل سبک تم را برای ویرایش باز داشته باشید.

اگر اینطور نیست، این فایل را از لیست سمت راست انتخاب کنید، Stylesheet (style.css) نامیده می شود. بیشتر اوقات، رنگ فونت در بدنه تنظیم می شود، بنابراین بیایید سبک های این عنصر را پیدا کنیم و رنگ قرمز را به عنوان رنگ فونت تنظیم کنیم.

پس از ذخیره فایل می توانیم سایت را آپدیت کنیم و رنگ قرمز فونت اصلی را در سایت ببینیم.

همانطور که می بینید، سفارشی کردن یک قالب وردپرس برای خودتان یک کار نسبتا ساده است. با کمی دانش CSS قادر خواهید بود قالب وردپرس را تغییر دهید و در صورت نیاز قالب را شخصی سازی کنید. با همین طرح، می‌توانیم مشکلات مشابه دیگری را حل کنیم. در این مورد من با شما خداحافظی می کنم. موفق باشید و به زودی شما را می بینم!

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

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

اندازه نوار کناری باید چقدر باشد

ممکن است نیازی به تغییر چیزی نداشته باشید. نوار کناری را فقط در صورتی تغییر دهید که "کج" و غیر طبیعی به نظر برسد. ابتدا مطمئن شوید که نوار کناری پهنای کمتری نسبت به بدنه صفحه حاوی محتوا دارد. نوار کناری بخش کلیدی سایت نیست، بنابراین نباید توجه زیادی به آن شود - حداکثر می تواند 40٪ از قسمت قابل مشاهده صفحه را اشغال کند. لطفاً توجه داشته باشید که اگر دو نوار کناری (یا چندین) دارید، عرض آنها نباید از 50٪ عرض کل صفحه تجاوز کند. بهتر است فقط از یک ستون کناری استفاده کنید - به این ترتیب کارآمدتر است.

یک "قاعده طلایی" از طراحان برای سایت هایی که فقط از یک نوار کناری استفاده می کنند وجود دارد. این قانون بیان می کند که اگر تنها یک نوار کناری در یک صفحه وجود داشته باشد، نباید بیش از 38 درصد از عرض سایت را اشغال کند. بسیاری از طراحان وب برجسته در مورد چنین شخصیت مرموز صحبت می کنند (به عنوان مثال: Jarel Remik).

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

نحوه تغییر اندازه نوار کناری به صورت دستی

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

پارامترهای نوار کناری در کد به صورت بلوک هستند. برای تغییر اندازه کل قاب، از جمله ستون های کناری، باید وارد کد شوید و به طور متناوب پارامترهای عددی عرض و ارتفاع هر عنصر را تنظیم کنید. برای مثال:

  • هدر - مسئول اندازه هدر سایت است.
  • bg - این محتوای اصلی است، یعنی بخشی از صفحه که مقالات در آن قرار می گیرند (در این قسمت است که نوار کناری قرار دارد).
  • فوتر پاورقی سایت است یعنی قسمت پایین آن.

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

برای تغییر اندازه نوار کناری، چیزی شبیه به این خط پیدا کنید

این خط مسئول پارامترهای قسمت میانی صفحه یعنی بلوک محتوا و ستون های کناری است. خط "اصلی" را لمس نکنید - این قسمت اصلی سایت است. شما باید برچسب "mainnav" را پیدا کنید - این نوار کناری است. تنها چیزی که نیاز دارید این است که آیتم عرض را در CSS تغییر دهید، که مسئول عرض است - برای وارد کردن مقدار اندازه متفاوت. می توانید نوار کناری را کوچکتر یا بزرگتر کنید، اما به یاد داشته باشید که نکات اندازه گیری بالا را دنبال کنید تا مطمئن شوید سایت شما به درستی نمایش داده می شود.

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

افزونه تغییر اندازه نوار کناری

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

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

مزیت استفاده از افزونه برای تغییر سایدبار این است که همه کارها را به صورت خودکار انجام می دهد. یعنی آنچه را که می خواهید تغییر دهید با استفاده از سیستم Drag & Drop نشان می دهید و ماژول به طور مستقل کد عنصر را بر اساس درخواست شما تصحیح می کند. اگر می خواهید قدرت خود را در ویرایش تگ های html امتحان کنید، این افزونه چنین فرصتی را در اختیار شما قرار می دهد. علاوه بر این، دارای کدهای کوتاه ویژه برای افزودن توابع اضافی به سایت است - بیش از 40 پسوند.

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

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

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

من اخیراً مقالات زیادی را در لیست طولانی می نویسم و ​​در این فرآیند به مشکلی در ویرایشگر پست بصری داخلی وردپرس پی بردم که قبلاً در مورد آن نمی دانستم یا خیلی اذیتم نمی کرد.

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

مسئله

هنگام ایجاد پست‌های بزرگ (عمدتاً با عکس)، اغلب مجبور بودم پست را ذخیره و پیش‌نمایش کنم تا مطمئن شوم فهرست به درستی قالب‌بندی شده است. علاوه بر این، اغلب مجبور بودم متنی را مستقیماً روی تصویر خود بنویسم، زیرا اندازه پنجره ویرایشگر تقریباً یک و نیم برابر بزرگتر از هر یک از تصاویر من است (و همچنین بلوک محتوای اصلی در سایت من):

راه حل

راه حل نسبتا ساده است، اما باید بدانید که چگونه آن را پیاده سازی کنید. ابتدا باید عرض فعلی بلوک محتوای سایت خود را بدانید. در مورد من، عرض بلوک وبلاگ من 650 پیکسل است.

سپس باید فایل خود را باز کنید functions.phpو کد زیر را در پایین فایل اضافه کنید:

تابع fb_change_mce_buttons($initArray) ($initArray["width"] = "650px"; return $initArray; ) add_filter("tiny_mce_before_init", "fb_change_mce_buttons");

نتیجه

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

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

بیشتر بخوانید: