Как создать одностраничный сайт с любой темой WordPress

Мы получаем много вопросов о том, как сделать одностраничный веб-сайт или продаем ли мы одностраничные темы WordPress. Позвольте мне ответить на оба этих вопроса в самом начале. Каждая тема WordPress может быть одностраничным веб-сайтом, и я покажу вам, насколько это просто.

Что такое одностраничный сайт?

Одностраничный веб-сайт — это не что иное, как веб-сайт со всем необходимым контентом на одной странице, обычно на главной странице.

Он в основном используется компаниями, которые хотят продвигать один продукт или услугу четким и прямым способом . Вот некоторые примеры: демонстрация портфолио вашим клиентам, организация мероприятия или открытие нового бизнеса.

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

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

Как создать одностраничный сайт на WordPress?

Якорные ссылки

Для простого одностраничного веб-сайта все, что нам нужно, — это меню , контент и якорные ссылки . Думаю, вы все знаете, что делают меню и контент, так что давайте немного поговорим об якорных ссылках. Анкорные ссылки состоят из обычной ссылки, которая указывает на анкор и сам анкор. Ссылки, указывающие на якорь, являются обычными ссылками, начинающимися с символа # . А сам якорь — это конкретное место где-то на вашей странице. Давайте рассмотрим простой пример.

Это наша ссылка в меню, которая указывает на якорь:

 <a href="#middle">Go to the middle</a>

А это наш контент с самим анкором:

 <h1>Learning about anchor links</h1> <p> Some lorem ipsum content ….</p> <h2>Middle of the page</h2> <p> Some lorem ipsum content ….</p>

В данном случае #middle — это наша якорная ссылка, а id=”middle” — наша якорная ссылка. При нажатии на ссылку «Перейти к середине» мы перейдем к нашему якорю с заголовком «Середина страницы». Вот и все! Вот как мы можем сделать самый простой одностраничный веб-сайт. Вы можете добавить на свой сайт столько анкоров, сколько захотите. Давайте возьмем наши недавно полученные знания и применим их на сайте WordPress.

Создание якорных ссылок с помощью меню WordPress

Специально для этой цели я уже сделал простой одностраничный веб-сайт с нашей темой GrowthPress, которая будет нашим практическим примером. Во-первых, я создал новую страницу и добавил некоторый контент. Контент состоит только из нескольких абзацев и заголовков. Мы можем добавить привязки практически к любому элементу HTML, но в нашем случае мы добавим их ко всем заголовкам в контенте.

На скриншоте видно, что для редактирования HTML контента нам потребуется сменить редактор с визуального на текстовый. Теперь мы можем видеть все теги HTML в нашем контенте. В нашем случае все заголовки используют <h2> , и мы будем использовать их для добавления якорей. Как и на скриншоте выше, вам нужно будет добавить идентификатор с привязкой к этим тегам. Например: <h2 id=”our-anchor”>Some Title</h2> . Обратите внимание, что анкоры пишутся без # , но все анкорные ссылки должны начинаться с # . После того, как мы добавили все анкоры в наш контент, мы можем соединить их с помощью анкорных ссылок.

Если вы знакомы с WordPress, вы знаете, что мы можем изменить ссылки меню в wp-admin -> Внешний вид -> Меню, и именно здесь мы создаем наши якорные ссылки.

На скриншоте видно, что я выбрал «Пользовательские ссылки» и вместо классического URL-адреса добавил якорную ссылку #about-us . Щелчок по этой ссылке теперь перейдет к нашему id=”about-us” в содержании. Как только мы добавили все якорные ссылки, наш простой одностраничный веб-сайт готов. Нажмите на вновь созданные ссылки и убедитесь в этом сами!

Плавная прокрутка

Да, я полностью согласен, одностраничный веб-сайт, который мы делали до сих пор, великолепен, но эти мгновенные переходы не так круты, как плавная прокрутка, верно? Чтобы добиться плавной прокрутки, нам нужно добавить на наш сайт немного кода javascript.

В большинстве премиальных тем есть какое-то поле для добавления пользовательского кода. Например, в наших темах вы можете перейти в wp-admin -> Customizer -> Theme Options -> Custom Code, где вы найдете поля, которые вы можете использовать для добавления пользовательского кода, как мы это сделаем сейчас.

Если в вашей теме нет места для пользовательского кода, вы можете использовать подходящий плагин. Я бы порекомендовал плагин Insert Headers and Footers от WPBeginner. После активации плагина вы найдете поля для добавления пользовательского кода в wp-admin -> Настройки -> Вставить верхние и нижние колонтитулы.

Вставьте приведенный ниже код в одно из полей (мы рекомендуем использовать скрипты в настройках футера), и теперь у вас есть плавная прокрутка ваших якорных ссылок. Поздравляем! Вы только что создали одностраничный веб-сайт с любой темой WordPress!

 <script> ( function( $ ) { $(document).on('click', 'a[href*="#"]:not([href="#"])', function(e) { if (location.pathname.replace(/^\//,'') === this.pathname.replace(/^\//,'') && location.hostname === this.hostname) { var hashStr = this.hash.slice(1); var target = $(this.hash); target = target.length ? target : $('[name=' + hashStr +']'); if (target.length) { $('html, body').animate({ scrollTop: target.offset().top }, 1000); window.location.hash = hashStr; return false; e.preventDefault(); } } }); }(jQuery)); </script>

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

Как установить смещение для плавной прокрутки?

Если у вас есть фиксированное липкое меню, я бы порекомендовал также установить смещение, чтобы начало содержимого начиналось ниже вашего липкого меню. Для этого вам нужно будет отредактировать эту строку кода:

 $('html, body').animate({ scrollTop: target.offset().top}, 1000);

Единственное, что нам нужно сделать здесь, это добавить значение нашего смещения. Он должен быть не меньше высоты фиксированного липкого меню.

 $('html, body').animate({ scrollTop: target.offset().top - 180 }, 1000);

При этом мы избежим проблемы, когда начало вашего контента прячется за меню.

Плюсы одностраничных сайтов

Теперь, когда вы знаете, как создать одностраничный веб-сайт, давайте рассмотрим плюсы использования одностраничного веб-сайта.

Одностраничные веб-сайты обеспечивают лучший мобильный пользовательский интерфейс

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

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

Одностраничные веб-сайты требуют меньше текста

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

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

Одностраничные веб-сайты хорошо работают с изображениями

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

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

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

Одностраничные веб-сайты могут повысить вовлеченность пользователей и конверсию

Согласно одному исследованию, одностраничный веб-сайт может привести к более высокой конверсии по сравнению с его многостраничным аналогом. Причина этого проста: одностраничный веб-сайт обычно очень сфокусирован и предназначен для того, чтобы побудить посетителей к действию.

Он имеет более сфокусированное сообщение, и вашим посетителям легче понять, что вы хотите, чтобы они делали, когда они доходят до конца страницы.

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

На одностраничных сайтах легче ориентироваться

Также стоит отметить, что на одностраничных веб-сайтах легче ориентироваться. Поскольку все находится на одной странице, очень сложно заблудиться и вернуться к началу, особенно на мобильных устройствах.

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

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

Одностраничные веб-сайты облегчают таргетинг на определенную аудиторию.

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

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

Минусы использования одностраничного веб-сайта

Убрав плюсы, давайте взглянем на некоторые недостатки использования одностраничного веб-сайта.

Будет сложнее анализировать данные Google Analytics

К настоящему времени вы, вероятно, знаете, что Google Analytics может дать вам кучу полезной информации о посетителях вашего сайта. После установки на свой сайт вы сможете видеть, какие страницы популярны, какие сообщения привлекают новых посетителей и какие страницы нуждаются в оптимизации, чтобы люди дольше оставались на вашем сайте.

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

Поделиться своим сайтом в социальных сетях сложнее

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

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

Одностраничный веб-сайт может загружаться дольше

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

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

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

Вы ограничены таргетингом на ключевые слова

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

Одностраничные веб-сайты, как упоминалось в разделе «Плюсы», разрабатываются с учетом конкретной цели и аудитории. Обычно это означает таргетинг на конкретное ключевое слово и его варианты, что означает, что вам лучше создать многостраничный веб-сайт, если вам нужно настроить таргетинг на несколько отдельных ключевых слов.

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

Вы не можете использовать продвинутую тактику SEO

Говоря о SEO, одностраничный веб-сайт не позволяет вам использовать продвинутую тактику SEO, известную как разрозненность. Разделение на блоки относится к практике структурирования вашего веб-сайта по основным областям интересов, чтобы вы могли продемонстрировать свой авторитет в этих областях. С точки зрения непрофессионала, это практика создания категорий и подкатегорий для организации вашего контента.

Основное преимущество разрозненности заключается в том, что она открывает возможности для ранжирования по множеству ключевых слов и ключевых фраз, которые охватывают практически все вопросы, которые могут возникнуть у заинтересованного посетителя, а также охватывают все возможные возражения.

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

На одностраничных веб-сайтах может не хватать подробностей

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

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

Стоит ли использовать одностраничный сайт?

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

Если вы только начинаете свой бизнес и создаете много бизнеса из уст в уста, одностраничный веб-сайт позволит вам разместить свой бизнес в Интернете, не тратя слишком много времени на дизайн и разработку.

Если, с другой стороны, вы хотите сосредоточиться на получении большего органического трафика, сосредоточившись на SEO, и если вы расширяете свои бизнес-операции, тогда вам лучше подойдет многостраничный веб-сайт.

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

Вывод

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

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