نویسنده: Neil Lock

  • برگه‌ها و افزونه‌ها: به حداکثر رساندن تجربه شما از وردپرس

    pages-and-plugins-maximizing-your-wordpress-experience

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

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

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

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

    20160824_Una_PBS_Article_2

    تعریف برگه در مقابل نوشته

    در دنیای وردپرس، اصطلاح «برگه» تقریباً همیشه با اصطلاح «نوشته» همراه است – مثل «برگه‌ها و نوشته‌ها» – و زمان‌هایی پیش می‌آید که افراد آن‌ها را با هم اشتباه گرفته یا مترادف فرض می‌کنند. مسلماً گیج شدن بین این دو کار آسانی است (به‌خصوص اگر هنوز در قسمت کم‌عمقِ استخرِ مبتدیان وردپرس دست‌وپا می‌زنید). بنابراین با توجه به این موضوع، به خاطر داشته باشید که اگرچه این موارد ممکن است پیش‌پاافتاده به نظر برسند، اما همیشه ایده خوبی است که خود را با جزئیات کوچک وردپرس آشنا کنید، به‌ویژه اگر تازه شروع به کار کرده‌اید.

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

    برگه‌ها بلوک‌های سازنده هستند

    مگر اینکه تا به حال به هیچ کامپیوتری دست نزده باشید (که فرض می‌کنیم بعید است)، به احتمال زیاد قبلاً برگه‌های وب‌سایت را دیده‌اید یا در مورد آن‌ها شنیده‌اید، یا حداقل تصور معقولی از چیستی آن‌ها دارید. اگر ناآشنا هستید، نگران نباشید؛ این احتمال نیز وجود دارد که در بازدیدهای خود از سایت‌های دیگر، با برگه‌ها برخورد کرده باشید: بخش‌های سؤالات متداول و/یا درباره ما، فرم‌های تماس و گالری تصاویر. برای مبتدیان و وب‌سایت‌های تازه‌تأسیس، این‌ها به تعبیری می‌توانند شبیه به بلوک‌های سازنده باشند. اگر کنار هم قرار بگیرند، ارکان اصلیِ ماهیتِ سایت شما و آنچه ارائه می‌دهد را شکل می‌دهند.

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

    20160824_Una_PBS_Article_1

    بهره‌گیری بیشتر: افزونه‌های پایه‌ای که می‌توانید نصب کنید

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

    1. افزونه‌های سئو (بهینه‌سازی موتورهای جستجو)

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

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

    1. افزونه‌های پشتیبان‌گیری (بک‌آپ)

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

    1. افزونه‌های امنیتی

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

    1. افزونه‌های ضد هرزنامه (آنتی‌اسپم)

    هیچ‌کس هرزنامه نمی‌خواهد، مگر اینکه غذای اسپم (کنسرو گوشت) باشد. خوشمزه.

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

    1. کَش (Cache)

    نصب یک افزونه ذخیره‌سازی موقت (کَش) روشی تضمینی برای سرعت بخشیدن به عملکرد سایت و سرور شما است. ما مدتی است که از WP Fastest Cache استفاده می‌کنیم، اما افزونه‌های کَش معتبر و با رتبه بالای دیگری نیز وجود دارند – مانند W3 Total Cache – که شاید بخواهید آن‌ها را نیز امتحان کنید.

    می‌توانید اطلاعات بیشتری درباره کَش در سایت کُدکس وردپرس (WordPress Codex).

    نکته جالب: واژه Cache به صورت «کَش» تلفظ می‌شود نه «کاشِه»

    افزونه‌های تکمیلی برای برگه‌های شما

    ۱. افزونه فرم تماس

    شما به عنوان مالک سایت، مسئول پاسخگویی به سؤالات مخاطبان و بررسی پیشنهادات آن‌ها هستید. بنابراین در برهه‌ای از زمان، پس از طی مسیر ساخت سایت، ممکن است آن‌ها بخواهند – یا حتی نیاز داشته باشند – که با شما ارتباط برقرار کنند؛ و افزونه‌های فرم تماس دقیقاً برای همین کار هستند. اگرچه ساختن فرم تماس از پایه برای سایت امکان‌پذیر است، اما باید اعتراف کنیم که مواقعی پیش می‌آید که انجام این کار چندان منطقی نخواهد بود، به ویژه با در نظر گرفتن اینکه انجام این کار قطعاً زمان زیادی از شما خواهد گرفت، مخصوصاً اگر مبتدی باشید.

    WPBeginner فهرستی از بهترین افزونه‌های فرم تماس در بازار از دیدگاه خود دارد، در حالی که Site Point مقاله مشابهی درباره افزونه‌های رایگان موجود ارائه کرده است.

    ۲. افزونه رسانه‌های اجتماعی

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

    ۳. ابزارهای دیدگاه‌گذاری / Disqus

    همان‌طور که اشاره کردیم، برقراری ارتباط با مخاطبان امری ضروری است، به‌خصوص اگر محتوای سایت شما حول مقالات ویژه می‌چرخد. شناخت مخاطبان به شما یک برگ برنده نیز می‌دهد؛ می‌توانید از هر بازخوردی که دارند برای بهبود سایت و/یا محصولات خود استفاده کنید.

    سیستم Disqus یک ابزار ثبت دیدگاه بسیار محبوب و یکی از پرطرفدارترین‌ها در بازار است. Kikolani نیز مقاله بسیار مفیدی دارد که ممکن است به شما در تصمیم‌گیری برای انتخاب بهترین ابزار دیدگاه‌گذاری برای سایتتان کمک کند.

    افزونه‌ها فراتر از چیزی هستند که فکر می‌کنید

    فهرست افزونه‌های موجود برای سایت‌های وردپرسی به این مقاله ختم نمی‌شود. این‌ها تنها چند مورد از افزونه‌هایی بودند که از نظر ما بسیار مفید هستند؛ قلمرو افزونه‌های وردپرس قطعاً بسیار فراتر از این هشت موردی است که ما برشمردیم.

    با این اوصاف، ما احتمالاً نتوانسته‌ایم همه چیز را پوشش دهیم. بنابراین آیا افزونه‌ای در ذهن دارید که فکر می‌کنید باید در این لیست قرار می‌گرفت؟ در بخش نظرات زیر با ما در میان بگذارید، و شاید در یکی از مقالات آینده خود از پیشنهادات شما استفاده کنیم!

    سایت‌سازی خوش بگذرد!

  • چگونه بخش‌های از پیش طراحی‌شده Page Builder Sandwich را به تنهایی سفارشی‌سازی کنید

    We’ve been getting quite a few inquiries the past week about Pre-Design Sections (and by extension, the PBS Templates), what they are, and how they can be accessed.

    So in this article, we’ll be teaching you how to not only access them, but also how to maximize these features of Page Builder Sandwich: By customizing them and making them your own.

    Accessing the Pre-Designed Sections

    If you aren’t familiar yet, all you have to do to access the Pre-Designed sections is to hover your mouse onto the left side of your screen, and access the Elements Inspector. This is the sidebar that lets you drag and drop elements directly onto your content area.

    Say hello to the Elements Inspector!

    Once it’s accessed, simply scroll down to the bottom and select Pre-Designed Sections. A library of the sections will pop up. Select one from the collection, drag and drop, and it’ll show up on your content area, like so:

    From here, you can move the elements within the section around, or move the entire thing and adjust its position. And there you have it! You’ve selected a Pre-Designed Section from Page Builder Sandwich.

    Now it’s time to add in your own twist: By customizing and tweaking with the elements’ settings within the selected section.

    Customizing the Pre-Designed Sections

    Each element’s setting within any one Pre-Designed section can be edited and customized according to your website’s needs and your personal taste.

    This means everything included in your selected Pre-Designed section – like text, colors, images, buttons, everything – can be edited and tinkered with by you.

    بنابراین به عنوان مثال، اگر از رنگ پیش‌فرض آبی-سبز و تصویر مزرعه گندم در بخش پیش‌طراحی‌شده پیش‌فرض زیر راضی نیستید…

    You can adjust it. For instance, if I wanted a different background tint on the left:

    Or if you wanted to replace the image of the wheat field on the right:

    Or even change the button style, margin, padding, and font:

    …You can.

    برای مقایسه:

    Default PBS Pre-Designed Section

    The same Pre-Designed Section, completely tweaked and customized. Notice the different font, color scheme, button style, photo, and margin width. You can actually take this further, and let your imagination run wild.

    Here are a few more examples on how you can spice up our Pre-Designed Sections

    Default Pre-Designed Section from Sandwich

    The same Pre-Designed Section, customized

    You can do it with our Full-Page Templates, too:

    Default Template from Sandwich

    The same Template, customized

    Conclusion

    بخش‌های پیش‌طراحی‌شده Page Builder Sandwich فراتر از آن چیزی هستند که فکر می‌کنید.

    Tweak and customize them to make them completely your own, or even use them as a starting point for when you don’t want to design your page from the ground up.

    به یاد داشته باشید، Page Builder Sandwich اینجاست تا به شما کمک کند در زمان کمتری طراحی کنید. استفاده کامل از بخش‌های پیش‌طراحی‌شده و الگوهای تمام‌صفحه ما دقیقاً در انجام همین کار به شما کمک خواهد کرد.

    Design in less time!

    Get access to Sandwich’s Pre-Designed Sections, Templates, and a whole lot more.

    Try Live Preview
  • #PBSUpdate: ۲۰۰٪ افزایش عملکرد و المان‌های جدید

    Only a few weeks ago, we released PBS Version 4.1. This update included tweaks on the formatting bar and some text formatting updates, among others. For Version 2.0 though, while we made additional features, we decided to focus more on PBS’ overall performance.

    200% Performance Increase & A Little Help from CodeInWP

    آنچه باعث این تغییر شد، مقاله‌ای درباره انتظارات از صفحه‌سازها از وب‌سایت CodeInWP بود. این مقاله فهرست کوتاهی از موارد مورد علاقه‌شان را به نمایش گذاشته بود و هر یک را بر اساس معیارهای خاصی بررسی می‌کرد. اگرچه Page Builder Sandwich خود در این فهرست قرار نگرفت، اما در مقاله اشاره کوتاهی به ما شد:

    With Page Builder Sandwich you won’t also lose your content and will be able to continue updating the page easily via a default WordPress editor.

    خواندن این مطلب همان چیزی بود که تیم ما را ترغیب کرد تا PBS را بیش از پیش ارتقا دهد. و با توجه به اینکه در فهرست قرار نگرفته بودیم، در عین حال کنجکاو بودیم بدانیم نقاط ضعف خاص ما چه بوده است. کمی بعد با CodeInWP تماس گرفتیم تا بررسی کوتاهی درباره PBS بخواهیم، و نویسنده مهمان، آن تیلور (Ann Taylor)، پاسخی بسیار سازنده و مفید به ما ارائه داد:

    “…I played around with a free version a bit. It shows a lot of promise: lots of modules, pretty intuitive UI, great WYSIWYG experience, everything is dragged around easily. However, when I had around 10 modules on the page, it became hard to continue working with it because of low editing speed…”

    این بازخورد عالی، ما را بر آن داشت تا سرعت و عملکرد PBS را بیشتر مورد بررسی قرار دهیم. ما سناریوهای مختلف زیادی را آزمایش کردیم و گلوگاه‌های شدیدی در سرعت پیدا کردیم. دلیل اصلی مشکلات عملکرد، محاسبات گوناگونی بود که افزونه برای نمایش کادرهای دور (outlines)، نوارهای ابزار و سایر نشانه‌های بصری ویرایش انجام می‌داد. در زیر نموداری از عملکرد نسخه ۴.۱ افزونه PBS در مرورگر کروم آورده شده است:

    Here are the important points of the graph in a nutshell:

    • نواحی بنفش بلند، بد هستند
    • نواحی بنفش پهن، بدتر هستند
    • ما سرعت امور را تا حد زیادی افزایش داده‌ایم، و اکنون نمودار ما برای نسخه ۴.۲ به این شکل است:

    If you compare the tall and wide purple areas from the two graphs, that means that we have achieved a 200% performance increase!

    4 New Elements

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

    Spacer Element

    تنظیم مارجین یا حاشیه‌های خارجی المان برای دستیابی به فضای مورد نیاز آسان است. از المان فاصله‌انداز (spacer) می‌توان به عنوان جایگزینی برای این کار استفاده کرد. این ویژگی به ویژه زمانی مفید است که بخواهید ردیف‌های خاصی در صفحه‌نمایش‌های موبایل بیش از حد کوچک و فشرده نشوند.

    Featurette Element

    المان featurette می‌تواند برای ساخت بخش‌هایی از صفحه با سرعت بالاتر مورد استفاده قرار گیرد. این بخش‌ها می‌توانند شامل هدرهای برجسته (hero headers)، گردونه نظرات مشتریان (carousel testimonials) و موارد دیگری باشند که می‌توانید برای ارتقای عملکرد صفحه خود از آن‌ها استفاده کنید.

    Since all of the Featurette Elements are pre-designed, all you’ll have to do is simply drag the “Featurette” button from the Elements Tab, and choose what you want to add on your workspace from there.

    Team Members Element

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

    Gallery Element

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

    A Huge Thank You

    نسخه ۴.۲ یکی از مهم‌ترین به‌روزرسانی‌های ما تاکنون است. به‌هرحال، عملکرد و کارایی برای هر افزونه فوق‌العاده‌ای حیاتی هستند. مایلیم از Ann Taylor@ و CodeInWP برای ارائه بازخوردهای سازنده و آرزوی موفقیت برای ما در این مسیر تشکر کنیم. و همچنین از صمیم قلب از همه کاربران PBS به خاطر حمایت همیشگی‌شان سپاسگزاریم.

    ما به‌زودی به‌روزرسانی‌های بیشتری را منتشر خواهیم کرد (از جمله ویژگی وعده داده شده فونت‌های گوگل، در میان موارد دیگر)، بنابراین منتظر آن باشید!

    تا آن زمان، ساخت سایت لذت‌بخشی را از طرف تیم PBS برایتان آرزومندیم!

  • چهارم ژوئیه مبارک! ۲۰٪ تخفیف روی تمام لایسنس‌ها تا ۶ ژوئیه!

    از ۴ تا ۶ ژوئیه ۲۰۱۷، از ۲۰٪ تخفیف روی تمام لایسنس‌های Page Builder Sandwich بهره‌مند شوید! فقط کافی است کد تخفیف 4JULY2017 را وارد کنید تا همین امروز تخفیف خود را دریافت نمایید!

  • ۱۰ روشی که وب‌سایت شما می‌تواند در تولید سرنخ سرآمد باشد و چگونه PBS می‌تواند در انجام آن به شما کمک کند

    Page Builder Sandwich helps you, well… build websites.

    Keeping your audience reeled into your page (and successfully generating leads) is a different story altogether, though.

    Don’t get us wrong. Lots of sites can achieve this without a worry, but that’s usually because they spend a significant amount of time and research doing just that.

    In contrast, some sites admittedly have a little trouble pulling it off, and more often than not, some of them don’t know where to begin. But don’t worry – Page Builder Sandwich will try to lend you a hand with that very same thing.

    Why is it Important to Generate Leads?

    One crucial thing to remember is that generating leads takes more than just buying a domain and setting a website up.

    Now, before we get too into it, take note that Page Builder Sandwich isn’t a marketing website.

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

    «اما شما چطور می‌توانید در جنبه بازاریابی این موضوع کمک کنید؟»

    Great question! A few weeks ago we began corresponding with Straight North, a blog that specializes in digital marketing and lead conversion. They’ve given us some really tips which we hope you guys find helpful in your site-building journey.

    Now, remember that there could be lots of factors as to why your website isn’t generating the amount of leads you’d like. The first step is to identify what these factors are, and hopefully, this list can help you out with doing just that.

    TIP #1: Create Content that Stimulates Action

    According to Straight North, 84% of website conversions occur on the first visit, and only 11% convert in the second.

    به عبارت دیگر، برداشت اولیه بسیار مهم است.

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

    That’s why it’s you and your team’s job to try and convince people to stay glued to your page.

    Straight North suggests that posting copy and content (both text and images) is a great way to catch your visitors’ attention. Remember to always allot sufficient time to research on what makes good copy and good content, and never underestimate either.

    در اینجا چند وب‌سایت آورده شده است که ممکن است به شما در مسیر ایجاد سرنخ‌های موفق کمک کنند:

    How PBS Can Help:

    Wow your site visitors by using interactive PBS elements like the Carousel, or use Parallax Scrolling, and Video Backgrounds to catch their attention. Remember to execute their placement in a balanced way though, as to not overwhelm your audience.

    TIP #2: Intuitive Navigation

    In the realm of web development and site-building, intuitiveness in the user interface (or UI) is key.

    This means that when your visitors or users find their way around your site by intuition (i.e. easy site-navigation and straightforward instructions), they’re more likely to stay glued on your site.

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

    Straight North adds that getting too “clever and creative” with navigation labels is a bad idea, and suggest that you use terms like “Contact Us” for call-to-action buttons, rather than using vague labels like “Interact!” or “Dialog.” Remember that bombarding your site with too much jargon can cause frustration to your audience as well.

    So as long as navigating through your website comes to the user as second nature, then you have one less thing to worry about when trying to convert leads.

    How PBS Can Help:

    Page Builder Sandwich’s UI is highly intuitive, and is akin to using a Word processor (like Google Docs and Microsoft Word). Check out our demo to get some inspiration on how you can apply intuitive changes to your site, too!

    OTHER PAGE BUILDERS …have too much stuff going on.

    PAGE BUILDER SANDWICH …gets straight to the point.

    TIP #3: Use Relevant, Custom Imagery

    Your images and how they’re presented also matter, and they matter a lot.

    While it may seem trivial to some, uploading boring stock images, stretched out/pixelzed photos, or badly-presented typography is a huge factor that dictates whether your visitors stay on your site, or move to a better, more credible-looking alternative.

    How PBS Can Help:

    Because it’s WordPress-run, PBS lets you post high-quality photos in your website. As long as you have the right image dimensions, you shouldn’t have a problem with posting photos.

    Additional lifehack: You can also check out Pexels.com and Unsplash.com to get awesome, high-quality stock photos!

    TIP #4: Persuasive Credibility Elements

    Skepticism is a huge conversion killer.

    That’s why more often than not, it’s always a good idea to add in elements that back up your credibility as a website (or business), like testimonials from credible sources, and logos of reputable companies or groups that you’ve worked with. So use customer testimonials, show logos of well-known customers, and include third-party mentions in your content.

    How PBS Can Help:

    Use PBS features to vouch for you. Display your customers’ testimonials in a Carousel, or use the Featurette element to showcase third-party mentions, or make use of the column element to effectively display logos of your well-known customers (like in the graphic above).

    TIP #5: Get Personal!

    Straight North says that using a lighter, casual tone makes all the difference when writing content (such as articles and bio’s) on your site. This lets your users know that you’re human too, and not just some bot trying to get a run for their money (which we hope you aren’t).

    How PBS Can Help:

    While this part is entirely up to you and your team, it wouldn’t hurt to use elements such as the Featurette, Gallery, and Image Box to liven up your bio’s as well. Adding in other PBS elements like Social Media Icons can help put a personal touch to your pages, too.

    PBS’ Industry Template makes full use of the Image Box Elements for its About Us and Feature Sections.

    TIP #6: Irresistible Calls-to-Action

    Calls-to-Action (CTA) are a crucial part of generating leads.

    You will FAIL to capture first-visit conversions unless you ASK. – Straight North

    Just asking isn’t enough, though. According to Straight North, your calls-to-action should be executed both “skillfully and persuasively”.

    The trick is to have effective Calls-to-Actions plus a good combination of smart consistent placement, offers that give off substance, time-sensitive offers (giving them offers for a set, limited time will give them a sense of urgency), and most importantly, guaranteed offers.

    You want your site to trust you. “Take away all arguments for delay, and conversions will increase”, Straight North says.

    How PBS Can Help:

    PBS’ Call-to-Action Button – as well as other elements such as the Countdown and Page Heading element – can help ease your burden regarding this task.

    Executing them correctly is up to you and your team though, so make sure to give time to research about CTA placements and other marketing tips.

    در اینجا منابعی آورده شده است که می‌توانند به ارتقای مهارت شما در استفاده از CTA (فراخوان به اقدام) کمک کنند:

    TIP #7: User-Friendly Forms

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

    This is why placing user-friendly contact forms on your site is of the utmost importance. They’re the ultimate “make-or-break stage of a great conversion opportunity”, says Straight North.

    A couple of PBS’ third-party plugins available for shortcode mapping

    So don’t intimidate your site visitors by overwhelming them with too many question forms, or have them exhaust too much energy, like having them type long sentences instead of choosing their answers from a drop-down list.

    Letting them know that you value their privacy is also a must. Be sure to place clean, good-looking forms on your site so as to boost credibility.

    How PBS Can Help:

    With PBS’ Shortcode Mapper feature, you can place awesome, reputable contact forms like Advanced Custom Fields (ACF) and Contact Form 7 on your site.

    TIP #8: Prominently Displayed Phone Numbers (or Contact Details)

    Contact number and social media buttons displayed prominently in PBS’ Restaurant Template

    نمایش هماهنگ و برجسته شماره تلفن‌ها امری ضروری است اگر شما از آن دسته کسب‌وکارهایی هستید که از طریق تماس‌های تلفنی پشتیبانی ارائه می‌دهید. استریت نورث (Straight North) اضافه می‌کند که سرمایه‌گذاری روی شماره‌های رایگان (toll-free) نیز می‌تواند جهش خوبی در نرخ تبدیل شما ایجاد کند.

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

    How PBS Can Help:

    PBS’ Full Page Niche-Based Templates have fields that let you feature phone numbers and other contact information more prominently, so that your visitors can reach you right away.

    TIP #9: Continuous Testing

    Straight North attests to the importance of site maintenance and testing: “No matter how good your website is in converting leads, it can always be better.”

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

    How PBS Can Help:

    This one is up to you, but if you’d like a tip: the PBS Team continuously tests the site and page builder for any bugs, and always work to make sure you guys are satisfied. We don’t exactly have a feature for making sure you do regular tests on your site, so this one’s entirely up to you and your team. Do it, and do it well!

    TIP #10: Mobile-Friendly Design

    Almost everyone has a cellphone or tablet; but while only 23 percent of lead conversion rates come from mobile devices, it absolutely will not do to ignore any sort of potential conversions, no matter the percentage (leads are still leads, after all).

    “Users converting from desktop view may have seen the site initially on a mobile device,” Straight North says. “Mobile conversions are (also) likely to grow as mobile Internet access continues to soar at the expense of desktops.”

    You can preview your site on mobile view directly on desktop

    How PBS Can Help:

    Page Builder Sandwich is Mobile Responsive. You can view PBS-built sites on mobile, as well as check previews of your mobile site directly through desktop while editing. This way, you won’t have to keep switching to your phone in order to check if your site looks good on mobile.

    Everything Matters in Site-Building

    At the root of it all, it’s very, very important to understand that everything on your website – down to the smallest of details – has an impact on your audience.

    The quality of your copy, images, your layout – all of it matters, and it matters a lot.

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

    Hopefully your website garners the success it very well deserves; it’s been built with PBS, after all. ?

    با آرزوی موفقیت برای شما و تمامی تلاش‌هایتان، و مثل همیشه از اینکه از Page Builder Sandwich استفاده می‌کنید سپاسگزاریم!

    ساخت سایت خوش بگذرد!

  • به‌روزرسانی PBS: نسخه ۴.۱ و کاربردپذیری

    پس از انتشار نسخه ۴.۰ در ژانویه گذشته، ما به کار روی توسعه PBS ادامه داده‌ایم و رفع اشکالات و بهبودهایی را به آن افزوده‌ایم. ما از به اشتراک گذاشتن آنها با شما هیجان‌زده‌ایم، پس این‌ها مواردی هستند که برای به‌روزرسانی نسخه ۴.۱ آماده کرده‌ایم.

    بهبودهای نوار قالب‌بندی

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

    به‌روزرسانی‌های انتخابگر رنگ

    در نسخه‌های قبلی PBS، انتخابگر رنگ مشکلاتی داشت که تا حدی روند ویرایش را دچار زحمت می‌کرد، به‌ویژه در زمینه ویرایش متن و رنگ متن. اما برای نسخه ۴.۱، این مشکل را برطرف کرده و تنظیمات جدیدی برای ویرایش متن بدون دردسر اعمال کرده‌ایم.

    • نمونه‌های رنگی بیشتر برای انتخاب آسان‌تر رنگ
    • انتخابگر رنگ اکنون شفافیت را نمایش می‌دهد
    • رفع اشکالات مربوط به ویرایش رنگ متن

    به‌روزرسانی‌های قالب‌بندی متن

    پیش از این، دکمه‌هایی داشتیم که باید برای افزایش مقدار مکرراً روی آن‌ها کلیک می‌کردید و سپس برای کاهش، کلید CTRL/CMD را نگه می‌داشتید و کلیک می‌کردید. در ابتدا فکر می‌کردیم این روش شهودی است، اما کاربران اعلام کردند که این موضوع واضح نبوده است. ما این ناهماهنگی‌ها را در این به‌روزرسانی برطرف کرده‌ایم.

    • دسترسی آسان‌تر به ارتفاع خط: نوار لغزنده را برای تنظیم به اندازه دلخواه بکشید، یا به سادگی اندازه مورد نظر خود را در کادر مربوطه وارد کنید
    • دکمه اندازه قلم برای استفاده آسان‌تر به دو دکمه تقسیم شد: کاهش و افزایش
    • افزایش/کاهش اندازه قلم نیز در دسترس‌تر است، اکنون با واحد اندازه‌گیری px برای ویرایش آسان‌تر. قبلاً واحد «x» را نمایش می‌داد که واقعاً معنایی نداشت
    • دکمه‌های تراز چپ/وسط/راست/تراز کامل اکنون با هم گروه‌بندی شده‌اند تا دکمه‌های نمایش داده شده کمتر شوند
    • دکمه «پاک کردن قالب‌بندی» اکنون سایر استایل‌ها (مانند ارتفاع خط) را نیز پاک می‌کند، در حالی که قبلاً این کار را نمی‌کرد

    بهبودهای خط افقی

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

    به‌روزرسانی‌های آینده: چه چیزهایی در انتظار PBS است؟

    همان‌طور که گفتیم، ما همچنان موارد جدید (و به‌روزرسانی‌های بیشتر) در دست اقدام داریم. در اینجا پیش‌نمایش کوتاهی از آنچه در آینده برای شما تدارک دیده‌ایم آمده است:

    • فونت‌های گوگل (بالاخره!)
    • ما در حال بررسی این ایده هستیم که نوار قالب‌بندی متن چیزی بیش از مکانی فقط برای قالب‌بندی متن باشد. چه می‌شد اگر دکمه‌ها با توجه به زمینه فعلی تغییر می‌کردند؟ به عنوان مثال، بسیار عالی خواهد بود اگر هنگام ویرایش متنی در داخل یک ستون، دکمه تراز عمودی ظاهر شود.

    مایلید چه چیزهایی در به‌روزرسانی‌های آینده PBS ببینید؟

    ما همیشه مشتاق بهبود PBS هستیم، پس اگر پیشنهادی دارید، با ما در میان بگذارید! آیا قابلیت خاصی مد نظر دارید که مایلید به لیست رو به رشد ما اضافه شود؟ آیا چیز دیگری هست که فکر می‌کنید در نسخه فعلی نیاز به تنظیم داشته باشد؟ در نظرات زیر به ما اطلاع دهید!

    ساخت سایت لذت‌بخشی داشته باشید!

  • افزودن آسان فرم‌های ثبت‌نام خبرنامه ایمیلی

    Easily-Add-Email-Newsletter-Signup-FormsAdding an email newsletter sign up form to your site is a great way to grow your website’s following and to keep your website visitors interested in your site or product. And now you can easily add and customize newsletter sign up forms directly in your designs.

    preview-newsletterNew in Page Builder Sandwich is the Newsletter Element (check the short gif above). Now you can add a newsletter sign up form for your MailChimp, AWeber or MailPoet newsletter lists directly into your designs.

    به طور معمول، شما باید یک افزونه دیگر نصب می‌کردید، سپس شاید یک کد کوتاه (شورت‌کد) در جایی اضافه می‌کردید، یا مجبور بودید از طریق یک پنجره پاپ‌آپ چند فیلد را پر کنید، یا شاید برای کارکرد فرم ثبت‌نام خبرنامه‌تان نیاز به تنظیم یک ابزارک داشتید. اکنون، تمام پیچیدگی‌های افزودن فرم‌های ثبت‌نام خبرنامه از بین رفته است. فقط کافیست المان خبرنامه را به برگه خود اضافه کنید، کلیدهای API لیست خود را وارد کنید و بلافاصله کار خواهد کرد.

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

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

    مانند بقیه بخش‌های Page Builder Sandwich، شما می‌توانید فرم ثبت‌نام خبرنامه کاملاً جدید خود را در هر کجایی که دوست دارید قرار دهید، فقط آن را به داخل سطرها یا به مکان دیگری بکشید.

    آیا لیست‌های ایمیل مهم هستند؟

    پاسخ کوتاه بله است. همان‌طور که می‌دانید اگر یک حساب توییتر داشته باشید، سایر کاربران توییتر می‌توانند شما را «دنبال» کنند و توییت‌های شما را ببینند؛ لیست ایمیل نیز روشی است که بازدیدکنندگان شما می‌توانند از طریق ایمیل سایت شما را دنبال کنند.

    هنوز لیست ایمیل ندارید؟

    If you don’t have a mailing list yet, now is a good time to get started. Getting a newsletter service like MailChimp or AWeber is good since they do the heavy lifting of managing your subscribers and blasting an email to your subscribers easily. They also have newsletter builders that will let you create a newsletter campaign easily. The good thing is they have free plans, so you won’t need to shell out cash in order to try it out.

    If you’re more of a I-like-to-handle-it-myself guy or gal, then you might consider using MailPoet. It’s downloadable free from wordpress.org and they have a paid model as well. With MailPoet, you’ll be able to see your subscribers within your dashboard and you can also send out emails from there. It’s easy to use as well and just takes literally less than 5 minutes to fully set up in your site (Yes, I’ve tried).

    درباره Page Builder Sandwich بیشتر بدانید

  • نسخه ۳.۰: بازنگری در نحوه کارکرد یک صفحه‌ساز

    version-3-0-rethinking-how-a-page-builder-should-work۱۰ ماه از زمانی که Page Builder Sandwich را به صورت عمومی عرضه کردیم می‌گذرد. اکنون حدود ۶,۰۰۰ نصب فعال داریم و این برای ما یک دستاورد بزرگ محسوب می‌شود. همچنین بازخوردهای بسیار زیادی به خاطر آن دریافت کرده‌ایم، هم خوب و هم بد. با این حال، نظر مشترک این است که کاربران از آسان بودن ساخت چیدمان‌ها و ایجاد محتوای خود در مقایسه با سایر صفحه‌سازهای موجود لذت می‌برند.

    بخش بزرگی از بازخوردهایی که دریافت کردیم، درخواست‌های مربوط به ویژگی‌های جدید بود و ما در چند ماه گذشته تعداد زیادی از این ویژگی‌ها را اضافه کرده‌ایم. اما هم‌زمان با انجام این کار، کم‌کم در طول مسیر شروع به تغییر رابط کاربری نیز کردیم. و در نتیجه، تجربه کاربری را هم تغییر می‌دادیم… که متأسفانه روندی رو به افول بود. کار به جایی رسید که لازم بود در رابط کاربری تجدید نظر کنیم، زیرا دیگر به سادگی و روانی کار نمی‌کرد و ویژگی‌های مختلف نیز با آن همخوانی و هماهنگی نداشتند.

    رابط کاربری از کار افتاده

    در نسخه‌های قبلی PBS، می‌خواستیم همه چیز به شکل دکمه باشد. چرا؟ چون کار با دکمه‌ها آسان است. شما فقط… روی آن‌ها کلیک می‌کنید. در نسخه‌های قدیمی‌تر بخش بازرس یا Inspector (نوار کناری در تصویر بالا)، کلیک روی یک دکمه مقدار را افزایش می‌داد و فشردن shift+کلیک روی دکمه مقدار را کاهش می‌داد. این کار به اندازه کافی ساده به نظر می‌رسد. اما با اضافه شدن گردونه‌ها (carousels)، زبانه‌ها (tabs)، نقشه‌ها و سایر المان‌ها و قابلیت‌های جدید، همه آن دکمه‌ها تبدیل به ملغمه‌ای از آیکون‌های گوناگون با طراحی‌های متفاوت شدند و نوعاً بیشتر شبیه به خط هیروگلیف به نظر می‌رسیدند تا یک رابط کاربری جذاب. این موضوع برای کاربران باتجربه مشکلی نبود، اما اگر با PBS تازه کار باشید، نگاه کردن به آن بسیار گیج‌کننده و رعب‌آور است.

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

    در نهایت، اخیراً نگاشت کد کوتاه (shortcode mapping) را برای افزونه‌های محبوب شما. این ویژگی ما را ملزم می‌کرد فیلدهای متنی، اسلایدرهای عددی، چک‌باکس‌ها و انواع گزینه‌های جدید اضافی را ایجاد کنیم که برای لذت‌بخش‌تر کردن تجربه ویرایش کدهای کوتاه شما لازم بود. در ابتدا ایده خوبی بود و بله، دستکاری کدهای کوتاه را برای شما آسان‌تر کرد. اما باز هم، این ویژگی از رابط کاربری «فقط دکمه» ما منحرف شد. در بازنگری به گذشته، واقعاً غیرممکن بود که فقط از دکمه‌ها برای تغییر ویژگی‌های کدهای کوتاه استفاده شود. حالا، در آخرین نسخه، ما به دو نوع کنترل رسیدیم: دکمه‌ها و فیلدهای کد کوتاه.

    چند دلیل دیگر نیز وجود داشت که باعث شد به این نتیجه برسیم که رابط کاربری ما دیگر کارآمد نیست (یا برای نیازهای ما مناسب نیست)، اما نکات بالا موارد اصلی بودند. با این حال یک چیز همیشه قطعی بود: می‌دانستیم که باید رابط کاربری را به‌روزرسانی کنیم.

    تعریف نحوه کارکرد ایده‌آل یک صفحه‌ساز

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

    مفهوم اساسی شماره ۱: تایپ مستقیم در محتوا برای ویرایش

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

    * افزونه‌هایی توسط دیگران برای رفع این مشکل ساخته شده‌اند، مانند Shortcake UI، اما این موضوع جداگانه‌ای است.

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

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

    این همان بخشی است که بیشتر صفحه‌سازهای دیگر در آن عملکرد خوبی ندارند. اکثر آن‌ها شما را مجبور می‌کنند درون یک فیلد متنی تایپ کنید تا همه چیز را ویرایش نمایید. باز هم تکرار می‌کنیم، در صفحه‌سازهای واقعیِ فرانت‌اند نباید چنین باشد. تایپ و ویرایش مستقیم متن از نسخه ۲ نقطه قوت Page Builder Sandwich بوده است و ما مطمئن شدیم که این ویژگی در نسخه ۳ نیز همچنان حفظ شود.

    مفهوم اساسی شماره ۲: بهره‌گیری از ماوس برای تغییرات سریع

    ماوس ابزار قدرتمندی است که اغلب در صفحه‌سازها نادیده گرفته می‌شود. اغلب اوقات، صفحه‌سازها از آن فقط برای این استفاده می‌کنند که افراد بتوانند آیتم‌ها را بکشند و در مکان‌های مختلف رها کنند (drag & drop)، یا روی دکمه‌ها و فیلدهای ورودی کلیک کنند. اگرچه این خوب است، اما از نظر صفحه‌سازی کارهای بسیار بیشتری می‌توانید با ماوس انجام دهید.

    به عنوان مثال، بازخورد بصری فوق‌العاده‌ای در استفاده از ماوس به عنوان ابزاری در ویرایش صفحه وجود دارد، به ویژه در تنظیم ویژگی‌های بصری مانند حاشیه‌ها (margins)، فاصله‌های درونی (paddings) و اندازه‌ها. اکنون، بهینه‌سازی و تنظیم المان‌های شما به یک تجربه طبیعی تبدیل می‌شود.

    در نسخه ۳ PBS، شما قادر خواهید بود موارد متعددی را با استفاده از ماوس خود تنظیم کنید. می‌توانید حاشیه‌ها/فاصله‌های بین المان‌های جداگانه، فاصله‌های درونی داخل ستون‌ها و همچنین اندازه تصاویر، آیکون‌ها و نقشه‌ها را تنظیم کنید. همچنین دکمه‌هایی را که به شما اجازه می‌داد مقادیر عددی را تغییر دهید، با اسلایدرها جایگزین کرده‌ایم.

    مفهوم اساسی شماره ۳: متن باید به آسانی استایل‌دهی شود

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

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

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

    مفهوم اساسی شماره ۴: گزینه‌های پیشرفته استایل باید انعطاف‌پذیر و در عین حال قابل فهم باشند

    نکته اساسی در مورد یک صفحه‌ساز این است که باید به کاربران اجازه دهد طرح‌های خیره‌کننده‌ای را به راحتی خلق کنند. این بدان معناست که ما باید بدون تحمیل یک منحنی یادگیری دشوار، تنظیمات و گزینه‌های متنوع زیادی را فراهم کنیم. امکان تنظیم مارجین‌ها، پدینگ‌ها و استایل‌دهی به متن عالی است، اما این‌ها فقط تا حد مشخصی کارایی دارند. برای انجام درست کار به گزینه‌های بسیار پیچیده‌تری نیاز دارید، گزینه‌هایی مانند تصاویر پس‌زمینه، الگوها (patterns)، کادرها (borders)، پس‌زمینه‌های ثابت (fixed backgrounds) و موارد دیگر. قرار دادن تمام این تنظیمات مختلف بر روی هم می‌تواند کمی گیج‌کننده باشد، بنابراین برخی از آن‌ها را ساده کرده و در دسته‌بندی‌هایی سازماندهی کرده‌ایم تا در نسخه ۳ همه چیز کاربرپسندتر شود.

    مفهوم اساسی شماره ۵: پشتیبانی از کد کوتاه (Shortcode)

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

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

    نتیجه‌گیری

    ما تمام این ویژگی‌های اساسی ذکر شده را گرفته و آن‌ها را در نسخه ۳ Page Builder Sandwich پیاده‌سازی کرده‌ایم. این بهترین صفحه‌سازی است که تاکنون برای وردپرس ساخته‌ایم. استفاده از آن بصری‌تر و طبیعی‌تر است، عملکرد سریع‌تری دارد، استفاده از آن آسان‌تر است و صمیمی‌تر و کاربرپسندتر از همیشه شده است.

    اگر در مورد یکی از ویژگی‌های ضروری یک صفحه‌ساز نظری دارید، با ارسال نظر در زیر با ما در میان بگذارید.

  • جایی که ماجرا کمی فنی می‌شود: چگونه نسخه خود از نگاشت شورت‌کد را محقق کردیم

    How-We-Made-Our-Version-Of-Shortcode-Mapping-Happen-2در مقاله قبلی، اصول نگاشت کد کوتاه و نحوه دسترسی به مزایای فوق‌العاده آن را بررسی کردیم. ما تصمیم گرفتیم مقاله‌ای را که به نسخه نگاشت کد کوتاه در Page Builder Sandwich می‌پردازد جدا کنیم، زیرا نوشته پیش‌رو ممکن است کمی فنی‌تر شود.

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

    یک فرآیند خودکار

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

    • در میان ۱٬۰۰۰ افزونه محبوب، دارای بالاترین امتیاز و به‌روزرسانی‌شده،
    • دارای حداقل ۴٬۰۰۰ نصب فعال،
    • دارای حداقل ۲۰ رای، و؛
    • دارای میانگین امتیاز حداقل ۳ ستاره

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

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

    سپس مجموعه‌ای از بررسی‌های خودکار را روی سورس‌کد هر افزونه اجرا می‌کنیم تا مشخص شود آیا حاوی کدهای کوتاه هست یا خیر، و سپس سعی می‌کنیم تمام آن کدهای کوتاه را به همراه تمام ویژگی‌هایشان پیدا کنیم. با پردازش داده‌ها، این کار منجر به شناسایی بیش از ۲٬۰۰۰ کد کوتاه شد. واقعاً شگفت‌انگیز است. کدهای کوتاه شناسایی‌شده سپس برای بررسی دستی وارد پایگاه داده نگاشت کد کوتاه می‌شوند.

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

    یک فرآیند دستی

    احتمالاً این سخت‌ترین بخش از کل سیستم نگاشت است. کدهای افزونه در اَشکال و اندازه‌های مختلفی عرضه می‌شوند؛ همه کدهای کوتاه به طور خودکار توسط اسکریپت‌های ما شناسایی نمی‌شوند. با اینکه مستندات وردپرس (WordPress Codex) می‌گوید برای فیلتر کردن ویژگی‌های کد کوتاه از تابع `shortcode_atts` استفاده شود، اما این صرفاً یک توصیه است و همه آن را رعایت نمی‌کنند. همچنین هیچ روش قطعی و مطمئنی برای بررسی اجزای داخلی یک کد کوتاه در زمان نصب یک افزونه وجود ندارد.

    بنابراین برای اطمینان از اینکه همه کدهای کوتاه و ویژگی‌هایشان را درست دریافت کرده‌ایم، یک بخش فرانت‌اند اختصاصی برای ویرایش کدهای کوتاه و ویژگی‌ها ایجاد کردیم که با استفاده از AngularJS و Bootstrap ساخته شده است.

    رابط کاربری Bootstrap و AngularJS برای اصلاح تمام کدهای کوتاه نگاشت‌شده.
    رابط کاربری Bootstrap و AngularJS برای اصلاح تمام کدهای کوتاه نگاشت‌شده.

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

    اگرچه این کار به‌شدت طاقت‌فرسا و خسته‌کننده است، اما داشتن یک فرآیند خودکار نکات مثبتی نیز دارد:

    • بر اساس آمارهای اولیه ما، تنها حدود ۱ افزونه از هر ۲ افزونه دارای کد کوتاه است.
    • نیمی از کدهای کوتاه شناسایی‌شده هیچ ویژگی‌ای ندارند (هرچند بخشی از این موارد ممکن است مثبت کاذب باشد)
    • با انتخاب افزونه‌های باکیفیت، به احتمال زیاد آن‌ها دارای مستندات کد کوتاه هستند

    تنها زمانی که تمام کدهای کوتاه یک افزونه بررسی شدند، سرور شروع به توزیع نگاشت‌های کد کوتاه آن افزونه بین کاربران می‌کند.

    یک فراخوانی Rest API

    آخرین قطعه این پازل، خود افزونه است. ایده در اینجا ساده است: بررسی کنید چه افزونه‌هایی فعال هستند، سایت از چه قالبی استفاده می‌کند و چه کدهای کوتاهی در دسترس هستند، سپس از پایگاه داده نگاشت کد کوتاه بپرسید که آیا نگاشتی برای آن‌ها دارد یا خیر. برای این منظور، یک نقطه پایانی (Endpoint) سفارشی در WP REST API ایجاد کردیم که تمام کلاینت‌ها برای دریافت آخرین نگاشت‌های کد کوتاه خود به آن متصل می‌شوند.

    آینده: جمع‌سپاری (Crowdsourcing)

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

    شاید فکر کنید: «چرا باید در نگاشت کدهای کوتاه کمک کنم؟ چه سودی برای من دارد؟» خوب، چند دلیل به ذهن می‌رسد که چرا افراد ممکن است مایل به کمک باشند:

    1. اگر افزونه‌ای ساخته‌اید و ما به دلیل معیارهای بالا هنوز آن را ثبت نکرده‌ایم (و در مخزن افزونه‌های وردپرس قرار دارد)، می‌توانید خودتان نگاشت‌ها را اضافه کنید. افزونه شما به‌طور کامل توسط PBS پشتیبانی خواهد شد!
    2. از آنجا که ما در فرآیند خودکار فقط با افزونه‌های موجود در مخزن وردپرس سر و کار خواهیم داشت، سازندگان افزونه‌ها و قالب‌های پریمیوم مشمول آن نمی‌شوند. بنابراین اگر چنین افزونه یا قالبی دارید، می‌توانید نگاشت‌های کد کوتاه را برای آن‌ها نیز انجام دهید.
    3. و برای افرادی که سازنده افزونه نیستند، می‌توانیم به کسانی که کمک می‌کنند پاداش دهیم. برای اینکه نگاشت کد کوتاه به تلاشی جذاب تبدیل شود، می‌توانیم به همراهان مهربان، یک لایسنس شخصی یا ارتقا به لایسنس پریمیوم PBS پاداش دهیم!

    عضویت در خبرنامه ما

    قابلیت نگاشت کد کوتاه به احتمال زیاد در تاریخ ۱۲ اوت  ۱۵ اوت  ۱۶ اوت ۲۰۱۶ برای مشتریان ما عرضه خواهد شد. تا این زمان، همه کدهای کوتاه نگاشت نخواهند شد (تخمین ما شاید ۱۰۰ افزونه باشد)، اما فرآیند نگاشت به طور مداوم انجام خواهد شد و مشتریان به محض ارائه موارد جدید، آن‌ها را دریافت خواهند کرد.

    در خبرنامه ما عضو شوید تا از اخبار مربوط به نگاشت کد کوتاه، زمان انتشار آن، و زمانی که نگاشت کد کوتاه را برای عموم باز می‌کنیم، مطلع شوید!

  • چرا باید آدرس‌های اینترنتی را در فایروال وردفنس در لیست سفید قرار دهید (و نحوه انجام آن)

    If you’re using Page Builder Sandwich along with Wordfence Security, there’s a chance you might have encountered something called a 403 error.

    Now, according to WordPress resource site WPBeginner, 403 errors occur when server permissions don’t allow access to a specific page.

    اما خطای ۴۰۳ به چه معناست و اصلاً چرا در Page Builder Sandwich رخ می‌دهد؟

    The 403 Error Explained

    شایع‌ترین علت خطای ۴۰۳ زمانی است که افزونه‌های امنیتی بر اساس شیوه یا استانداردی خاص پیکربندی نشده باشند.

    Like WordFence, most security plugins from WordPress restrict some actions if they’re suspected or proven to be malicious. These scenarios usually occur on your WP Admin or WP Login page, or show up as pop-ups alerting you that you don’t have authorization to view your page.

    اگر زمانی در Sandwich با این پنجره پاپ‌آپ مواجه شوید، ظاهر آن به این صورت خواهد بود:

    So what does this mean? Is Sandwich safe to use? Is WordFence bad? And does the 403 error warrant bad points for both Wordfence and Page Builder Sandwich?

    خب، خیر.

    All of this just means that Wordfence is extra careful when scanning your external plugins.

    And that’s actually a really good thing, especially since they’re a security plugin.

    WordFence is Legit…

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

    خلاصه مطلب: WordFence کاملاً معتبر است.

    …And So is Sandwich. But Why Does It Need Whitelisting?

    تنها Sandwich نیست که توسط WordFence مسدود می‌شود.

    سایر افزونه‌ها و نشانی‌های وب نیز در WordFence نیازمند قرارگیری در لیست سفید (نقطه مقابل لیست سیاه) هستند. برخی از افزونه‌های محبوب‌تر ممکن است قبلاً توسط Wordfence مجاز شناخته شده باشند.

    بنابراین در پشت صحنه چه اتفاقی می‌افتد، و خطای ۴۰۳ از کجا می‌آید؟

    Ajax Functions and Page Builder Sandwich

    افزونه Page Builder Sandwich در طول تجربه ویرایش شما توابع ajax را اجرا می‌کند. برخی افزونه‌های دیگر نیز همین کار را انجام می‌دهند.

    سایت W3Schools کمی بیشتر درباره ajax توضیح می‌دهد:

    AJAX is a technique for creating fast and dynamic web pages. It allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

    Chart taken from W3Schools

    در Page Builder Sandwich، فراخوانی‌های ajax مواردی مانند دریافت نگاشت‌های شورت‌کد، رندر کردن شورت‌کدها تا ذخیره تغییرات شما را شامل می‌شود. این موضوع ممکن است باعث بروز مشکلاتی مانند خطای ۴۰۳، مشکل در ذخیره خروجی یا شورت‌کدهای رندرنشده شود. این زمانی است که ممکن است نیاز داشته باشید فراخوانی‌های ajax مختص Page Builder Sandwich را در لیست سفید قرار دهید.

    Whitelisting Page Builder Sandwich on WordFence

    برای قرار دادن PBS در لیست سفیدِ فایروال Wordfence، یک ورودی با این پارامترها در بخش Whitelisted URLs اضافه کنید:

    URL: /wp-admin/admin-ajax.php

    Param Name: main-content

    Param: POST Body

    برای نصب‌های چندسایته وردپرس (Multisite)، ایده خوبی است که نام پوشه سایت خود را در نشانی اینترنتی بالا قرار دهید. برای مثال: /my-multisite/wp-admin/admin-ajax.php

    پس از افزودن این مقادیر، خطای ۴۰۳ باید به‌درستی رفع شود و شما باید بتوانید مجدداً خروجی خود را ذخیره کرده و شورت‌کدهای رندرشده تولید کنید.

    تنظیمات فایروال WordFence شما باید به این صورت دیده شود:

    Ta-da!

    Conclusion

    بله، استفاده از Page Builder Sandwich کاملاً امن است.

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

    افزونه WordFence Security نیز از این قاعده مستثنی نیست.

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