Блог

На этой неделе я создаю сайт на WordPress и хочу разместить призыв к действию в верхней части сайта, но отдельно от основной навигации. WordPress, похоже, не предлагает этого из коробки (например, кнопка пожертвования на сайте Юнисеф

Я пробовал использовать плагин Menuizer, он может добавить кнопку, но он помещает ее в конец навигации, так что она все еще завернута в гамбургер на мобильном устройстве, я хочу, чтобы она отображалась как отдельный элемент, как на (например, unicef.org )

Я также не возражаю против кодирования вручную, но я действительно не знаю, где / как это сделать.

Спасибо за любые указания

Во-первых, вам нужно установить новое расположение меню заголовка, на мой взгляд, вам лучше дублировать из существующего меню, которое у вас есть.

Во-вторых, вы создаете пункт меню, который позже вы будете использовать как кнопку CTA, вероятно, это приведет к скоплению текущего местоположения меню, или позиция может быть неправильной.

В-третьих, настройте ее с помощью css для правильного позиционирования.

Это делается непосредственно из шаблона (если шаблон был создан вами) Но что-то подсказывает мне, что вы используете готовый шаблон, тогда используйте пользовательский скрипт

Для вставки js-кода вы можете использоватьhttps://wordpress.org/plugins/insert-headers-and-footers / плагин или https://ru.wordpress.org/plugins/custom-css-js

Я не могу видеть ваш HTML-макет, чтобы помочь вам с селектором, поэтому попробуйте поэкспериментировать с этим примером:

 <script>
    (function($) {          
        let selectorOfContainer = '.mybox',
                url = '#your-link',
                className = 'my-btn',
                btnLabel = 'DONATE';

        let $mybtn = $('<a/>', {
          class: className,
          href: url
        });

        $mybtn.text(btnLabel);

        $(selectorOfContainer).append($myBtn); // prepend, after, before

    })(jQuery);
</script>
  

Затем используйте стили css для оформления вашей кнопки

 <style>
    .my-btn {
        text-decoration: none;
        display: inline-block;
        padding: 10px 20px;
        border-radius: 3px;
        background-color: #FFF;
        box-shadow: 0 0 4px rgba(0,0,0,.3);
        color: #e25420;
        text-transform: uppercase;
        font-weight: 700;
    }
    .my-btn:hover, .my-btn:focus {
        background-color: #f0eded;
    }
</style>
  

Мне было бы проще, если бы я увидел ваш сайт