از منوی افقی استاندارد در وردپرس خسته شده اید؟ در این پست، ما گام به گام نحوه ساخت منو در وردپرس به صورت عمودی برای موبایل را برای بهبود تجربه پیمایشی کاربران به شما نشان می دهیم.
آیا می خواهید یک فهرست عمودی در وب سایت وردپرس خود برای دسترسی بیشتر ایجاد کنید و یک تجربه پیمایشی همه جانبه برای کاربران خود به وجود آورید؟
با استفاده از این نوع هدر در المنتور، می توانید منو ناوبری خود را به جای استفاده در حالت افقی سنتی به کنار سایت خود منتقل کنید
در مقاله هاس قبلی نحوه ساخت منوی شناور در وردپرس را اموزش دادیم. در این پست، گام به گام نحوه ساخت منو در وردپرس موبایل را با استفاده از المنتور و المنتور پرو به شما نشان آموزش خواهیم داد
منوی نوار کناری موبایل چیست؟
برخلاف یک سر برگ چسبنده سنتی یا کوچک که به صورت افقی در بالای سایت شما قرار می گیرد، یک سر برگ نوار کناری چسبنده یا استیکی یک فضای عمودی را در سمت چپ یا راست سایت شما اشغال می کند و همیشه در صفحه نمایان است، اما در حالت پیش فرض، فضای بسیار کمی را اشغال می کند. اگر یک بازدید کننده بخواهد منو را به صورت کامل مشاهده کند، می تواند با کلیک بر روی نماد منوی ناوبری، آن را به صورت کامل مشاهده کند.
منوی نوار کناری چسبنده در وردپرس به طور پیش فرض به این صورت است:
و اگر یک بازدید کننده برای گسترش منوی کامل کلیک کند، به این شکل به آن ها نمایش داده می شود:
نکته ای که باید بخاطر بسپارید این است که این حالت ساخت منو در وردپرس در واقع فقط برای بازدیدکنندگان دسکتاپ و تبلت مفید است و برای بازدیدکنندگان موبایل گزینه مناسبی نیست. به همین دلیل، شما همچنان باید یک سر برگ پیش فرض منظم داشته باشید که برای بازدیدکنندگان تلفن همراه بارگیری شود. ما به شما کمک خواهیم کرد تا این سر برگ تلفن همراه جایگزین را در سایت خود تنظیم کنید.
مزایای ساخت منو در وردپرس برای نوار کناری موبایل چیست؟
مزیت اصلی این نوع منو این است که این سر برگ فضای عمودی بیشتری برای محتوای شما ایجاد می کند زیرا در بالای صفحه برای سر برگ فضای کافی وجود ندارد. می توانید از 100٪ فضای عمودی استفاده کنید و تمام کاری که شما باید برای ساخت منو در وردپرس انجام دهید این است که کمی فضای جانبی به منو خود اختصاص دهید.
این کار همچنین یک تجربه پیمایشی همه جانبه برای بازدیدکنندگان شما ایجاد می کند در حالی که در هر زمان به آن ها امکان دسترسی به ناوبری شما را می دهد.
آنچه برای ایجاد یک منوی نوار کناری مهم با المنتور نیاز دارید به شرح زیر است:
برای ایجاد منوی نوار کناری همراه خود، باید چند الگو و یا ویژگی مختلف را ترکیب کنید. در اینجا آنچه شما نیاز دارید برای شما اورده شده است:
Regular header: این عنوان جدیدی خواهد بود که بازدید کنندگان سایت شما از آن موبایل استفاده می کند. این سر برگ را برای بازدید کنندگان دسکتاپ و تبلت پنهان می کنید تا بتوانید به جای آن از سر برگ نوار کناری خود استفاده کنید.
Section template : یک الگوی بخش جداگانه برای سر برگ که حداقل یک نوار کناری خود را در آن ایجاد خواهید کرد (حالت پیش فرض).
Popup menu : این پیمایش کامل نوار کناری است که با کلیک بازدید کننده بر روی منوی نوار کناری کوچک شده ظاهر می شود. در مثال بالا، پنجره باز شونده همان چیزی است که شامل پیوندهای منو برای “صفحه اصلی” ، “درباره” و غیره است.
Page template : این همان چیزی است که به شما امکان می دهد به المنتور بگویید تا سر برگ نوار کناری شما را در کنار محتوای عادی خود نشان دهد.
از آنجا که نیاز به کار با پنجره های باز شونده و قالب ها دارید، برای ادامه این آموزش ساخت منو در وردپرس به المنتور پرو نیاز دارید.
نحوه ایجاد یک منوی عمودی برای موبایل با المنتور
-
سر برگ خود را در نمای دسکتاپ و تبلت پنهان کنید
برای شروع ساخت منو در وردپرس ، باید مطمئن شوید که سر برگ موجود فقط برای بازدیدکنندگان تلفن همراه نمایش داده می شود.
برای این کار، الگوی سر برگ خود را با استفاده از Elementor Theme Builder ( template → Theme Builder → Header. ) باز کنید، سپس نام سر برگ خود را پیدا کنید و روی ویرایش با Elementor کلیک کنید ).
یا اگر هنوز الگوی سر برگ اولیه خود را ایجاد نکرده اید، می توانید یک الگوی سر برگ جدید ایجاد کنید تا به عنوان سر برگ موبایل شما عمل کند. Elementor Pro شامل تعدادی الگو از پیش ساخته شده است که می توانید با استفاده از آن ها کار خود را شروع کنید. یا، شما همیشه می توانید سر برگ تلفن همراه خود را از ابتدا با سلیقه خود بسازید. به عنوان مرجع، ما از الگوی سر صفحه از مجموعه الگوهای Digital Agency استفاده می کنیم .پس از باز کردن رابط المنتور، تنظیمات مربوط به بخشی را که حاوی سر برگ شما است باز کنید:
به برگه Advanced بروید.
تنظیمات Responsive را پیدا کنید .
برای فعال کردن Hide On Desktop و Hide on Tablet در تنظیمات Visibility از قسمت مشخص شده استفاده کنید.
-
الگویی جدید برای پیمایش نوار کناری خود ایجاد کنید
اکنون برای ادامه ساخت منو در وردپرس وقت آن است که الگوی بخش مورد نظر را ایجاد کنید که به عنوان ناوبری نوار کناری شما عمل کند.
برای ایجاد الگوی خود، به قسمت الگو ها در داشبورد خود بروید:
به برگه Section بروید.
روی افزودن جدید کلیک کنید .
نام آن را Sticky Side-Nav Header بگذارید .
توجه: شما در حال ایجاد یک الگوی منظم ” Section” با Theme Builder هستید – نه یک الگوی ” Header” با Theme Builder (حتی اگر قصد دارید از این الگو به عنوان سر برگ چسبنده سمت کناری خود استفاده کنید).
تنظیمات بخش را پیکربندی کنید
ابتدا یک بخش جدید با یک ستون ایجاد کنید. در بخش تنظیمات Layout ، بخش را مانند این پیکربندی کنید:
Content Width: Full Width
Columns Gap: No Gap
Height → Min Height: 100 واحد (این سر برگ نوار کناری شما را طوری تنظیم می کند که 100٪ ارتفاع عمودی را به خود اختصاص دهد)
Column Position: Stretch
HTML Tag: سر صفحه (این گزینه اختیاری است ، اما پیکربندی این روش برای سئو خوب است)
پس از اینکه طرح را پیکربندی کردید، می توانید به قسمت Style بروید تا پس زمینه Nav-Nav را پیکربندی کنید. شما می خواهید رنگ یا گرادینت متناسب با بقیه سایت خود را انتخاب کنید.
تنظیمات ستون را پیکربندی کنید
سپس، تنظیمات ستون واحد را در بخش خود باز کنید:
در زبانه طرح بندی، گزینه ی Vertical Align را برابر با Space Between کنید .
در برگه Advanced ، یک فضای پدینگ به اندازه ی 50 px به پایین ستون اضافه کنید.
ابزارک ها را اضافه کنید
اکنون می توانید ابزارک ها را برای نمایش در منوی نوار کناری خود اضافه کنید. برای مثال ما این موارد را اضافه کرده ایم:
یک آرم
نمادی برای باز کردن منوی کامل
آیکون های شبکه های اجتماعی
توجه: بخاطر داشته باشید که از یک پنجره باز شونده برای قرار دادن موارد واقعی منوی پیمایش خود استفاده خواهید کرد ولی هنوز نیازی نیست نگران اضافه کردن منوی پیمایش باشید. تمام کاری که شما باید انجام دهید افزودن نمادی است که بازدیدکنندگان برای باز کردن منوی کامل کلیک می کنند.
لوگو سایت:
با استفاده از ابزارک Image ، تصویر آرم خود را اضافه کنید.
آیکون:
نماد خود را با استفاده از ابزارک Icon اضافه کنید. برای مثال ما از نماد Bars استفاده کردیم. با این حال، می توانید از هر آیکون، یا حتی یک تصویر استفاده کنید. فقط مطمئن شوید که بازدیدکنندگان می توانند به وضوح درک کنند که با کلیک روی این گزینه می توانند منو را به صورت کامل باز کنند
شما همچنین باید رنگی را انتخاب کنید و رنگ مورد نظر را متناسب با موضوع خود انتخاب کنید.
نماد های اجتماعی:
با استفاده از ابزارک Social Icons می توانید هر تعداد شبکه اجتماعی که می خواهید اضافه کنید. همچنین می توانید اشکال و رنگ ها را متناسب با موضوع خود پیکربندی کنید.
برای اطمینان از اینکه نمادهای اجتماعی شما به صورت عمودی در یک ستون قرار گرفته اند ، باید تعداد ستون ها را یک عدد در نظر بگیرید.
حتماً الگوی بخش خود را منتشر یا به روز کنید و سپس به داشبورد وردپرس برگردید.
3. یک الگوی جدید ایجاد کنید که شامل پیمایش نوار کناری شما باشد
در مرحله بعدی ساخت منو در وردپرس ، شما باید از Elementor Theme Builder استفاده کنید تا یک الگوی Single Page ایجاد کنید که شامل محتوای سایت شما و سر برگ چسبنده side-nav باشد.
برای انجام این کار، به الگو های سازنده قالب خود بروید :
به برگه Single بروید.
روی افزودن جدید کلیک کنید.
Single را به عنوان نوع الگو انتخاب کنید.
صفحه را به عنوان نوع پست انتخاب کنید .
نام آن را با Fixed Side-Nav بگذارید .
در ویرایشگر المنتور، بخشی با دو ستون ایجاد کنید:
ستون سمت چپ: این بخش نوار کناری چسبنده را نگه می دارد.
ستون سمت راست: این شامل محتوای منظم سایت شما خواهد بود.
پیکربندی ستون راست (محتوا)
برای افزودن محتوای عادی خود به ستون سمت راست، ابزارک های محتوای مورد نیاز سایت خود را اضافه کنید. این احتمالاً عنوان و محتوای پست و همچنین هر ابزارک دیگری است که می خواهید اضافه کنید.
پیکربندی ستون چپ (سر برگ نوار کناری)
برای افزودن سر برگ جانبی خود به فهرست سمت چپ، یک ابزارک الگو اضافه کنید. سپس، الگوی Sticky Sidebar Header را که در مرحله قبل ایجاد کرده اید، انتخاب کنید .
علاوه بر این، به تنظیمات Advanced برای این ستون بروید و مقدار شاخص Z را روی 1000 تنظیم کنید و تنظیمات Responsive را بر روی Hide on Mobile تنظیم کنید. این تضمین می کند که فقط بازدیدکنندگان دسک تاپ و تبلت سربرگ جانبی شما را مشاهده می کنند.
پیکربندی ستون و چیدمان ستون
در حال حاضر، سمت جانبی شما 50٪ از صفحه را اشغال می کند. برای برطرف کردن آن، ستون سمت چپ (با side-nav خود را انتخاب کنید) و عرض ستون آن را برابر با 5٪ در برگه Layout قرار دهید. با این کار المنتور ستون سمت راست را به طور خودکار برابر با 95٪ کند .
با تنظیم مقدار شاخص z اطمینان حاصل می کند که پنجره ناوبری کاملی که در مرحله بعدی ایجاد خواهید کرد، در زیر منو ناوبری شما قرار می گیرد.
selector {
width: 60px;
}
این CSS با تنظیم عرض برابر با 60 پیکسل اطمینان می دهد که Nav-Nav همیشه باریک باشد. در صورت تمایل می توانید این عدد را مطابق با تنظیمات خود تغییر دهید، توصیه می شود بیشتر از 60 پیکسل در نظر نگیرید.
جلوه های حرکت را پیکربندی کنید
اکنون می خواهیم اطمینان حاصل کنیم که منو ی جانبی بر روی صفحه ثابت است.
برای این کار، روی الگوی ستون سمت راست کلیک کنید:
به برگه Advanced بروید.
روی جلوه های حرکت کلیک کنید .
Sticky را بر روی Top قرار دهید.
حالت چسبنده را بر روی به دسکتاپ و تبلت فعال کنید.
اکنون، الگوی صفحه خود را منتشر کرده و از Display Conditions برای کنترل مکان نمایش آن استفاده کنید. اگر می خواهید از صفحه جانبی چسبنده خود در تمام صفحات خود استفاده کنید، آن را تنظیم کنید تا در همه صفحات نمایش داده شود .
اگر این مورد را به سایتی اضافه می کنید که قبلاً در آن الگو های صفحه موجود دارد، مطمئن شوید که همه آن الگو های موجود را به وضعیت “پیش نویس” تغییر دهید تا آن ها غیرفعال شوند و از درگیری های احتمالی جلوگیری کنید.
4- منوی ناوبری پنجره ای را ایجاد کنید
در مرحله بعدی باید پنجره ای ایجاد کنید که با کلیک بازدیدکننده روی نماد موجود در سر برگ کناری، منوی ناوبری کامل را نمایش دهد. پنجره باز شونده به سمت پایین و جانب کشیده می شود تا یک جلوه واقعا زیبا ایجاد کند.
در این مرحله ساخت منو در وردپرس ما حداقل موارد را توضیح می دهیم. با این حال، می توانید به همان اندازه که می خواهید در اینجا آزمایش کنید تا چیزی واقعاً عالی ایجاد کنید.
برای شروع ، به الگوها → پنجره ها → افزودن موارد جدید بروید و به پنجره خود یک نام بدهید تا به شما کمک کند آن را به خاطر بسپارید ، مانند Sliding Nav.
تنظیمات پنجره را پیکربندی کنید:
Width: 450px
Height: متناسب با صفحه
Horizontal Position: چپ
Overlay: پنهان کردن (خاموش)
Entrance Animation: کشیده شدن به سمت چپ
Exit Animation: کشیده شدن به سمت چپ
برای اطمینان از اینکه پنجره باز شونده هنگام حرکت به سمت راست به درستی حرکت کند، باید حاشیه اضافه کنید:
به برگه Advanced بروید.
تنظیمات Margin را پیدا کنید .
60 پیکسل به سمت چپ اضافه کنید (یا اگر شما انتخاب می کنید که قسمت سمت چپ چسبنده را در سمت دیگر نمایش دهید) یا سمت راست اضافه کنید.
در قسمت Padding 20 پیکسل اضافه کنید .
منوی پیمایش خود را اضافه کنید
در مرحله بعد، از ابزارک ها برای افزودن منوی پیمایش خود به قالب باز شونده استفاده کنید. در این مثال، از چهار ابزارک Heading استفاده می کنیم. همچنین می توانید از ابزارک Nav Menu برای افزودن سریع یکی از منو های ناوبری موجود برای خود استفاده کنید، فقط مطمئن شوید که طرح بندی را برابر با عمودی قرار دهید.
پس از پایان کار، حتماً پنجره باز شونده را منتشر کنید. نیازی به پیکربندی شرایط نمایش، راه اندازها یا قوانین پیشرفته نیست، در مرحله بعدی با راه اندازی پنجره باز شونده به صورت خودکار تنظیم می شوند.
-
پیکربندی نماد Side-Nav برای راه اندازی پنجره منوی Full Nav
برای اتمام کار ساخت منو در وردپرس ، باید آن را طوری تنظیم کنید که با کلیک بازدیدکننده بر روی نماد در الگوی قسمت side-nav شما، پنجره باز شونده ی منوی شما به بیرون کشیده شود.
برای انجام این کار، به الگو ها → ذخیره شده الگو ها رفته و الگوی بخش عنوان مهم Sticky Side-Nav Header خود را ویرایش کنید .
تنظیمات نماد پیمایش را باز کنید. سپس:
بر روی گزینه Dynamic Tags برای پیوند کلیک کنید .
در لیست گزینه های برچسب پویا، پنجره باز شونده را انتخاب کنید .
پیوند را برابر با پنجره تنظیم کنید :
برای انتخاب پنجره باز شونده، روی نماد آچار کلیک کنید .
Action را برابر Toggle Popup تنظیم کنید.
از قسمت جستجوی پنجره برای جستجو و انتخاب پنجره باز شونده، Sliding Nav که در مرحله قبل ایجاد کرده اید استفاده کنید.
سپس ، الگوی بخش خود را به روز کنید.
-
تست کنید و لذت ببرید
در این مرحله، کار ساخت منو در وردپرس شما باید تمام شده باشد! صفحه ای را در سایت خود باز کنید و مطمئن شوید که سر برگ همراه جانبی جدید مطابق انتظار کار می کند.
اگر مشکلی دارید، سعی کنید به طور موقت به قالب های پیش فرض وردپرس بروید تا اطمینان حاصل کنید که هیچ تضادی با قالب شما وجود ندارد.
اگر چه این آموزش ساخت منو در وردپرس باید با هر قالب وردپرس کار کند، اما همیشه احتمال بروز مشکلات غیر منتظره وجود دارد. اگر سر برگ جانبی شما در قالب های پیش فرض وردپرس کار می کند اما در قالب شما به درستی کار نمی کند، ممکن است لازم باشد برای ادامه کار با توسعه دهنده طرح زمینه خود تماس بگیرید.
فهرست های مهم خود را اضافه کنید.
استفاده از یک سر برگ چسبنده همراه به شما کمک می کند با یک تجربه پیمایشی همه جانبه فضای عمودی بیشتری را در سایت خود ایجاد کنید.
در اخرین مرحله ساخت منو در وردپرس می توانید موارد مورد نیاز را به سر برگ کناری خود اضافه کنید.
امیدواریم شما با استفاده از نسخه حرفه ای المنتور و این آموزش بتوانید به راحتی یک سر برگ side-nav در سایت وردپرس خود تنظیم کنید.
