wpnext
github wpnext
Cover Image for Создаем сайт музыкальной группы с помощью Gutenberg

Создаем сайт музыкальной группы с помощью Gutenberg

25 августа 2024

Сайт делаем на примере группы “Леприконсы”. У них очень удобный, лаконичный, стильный, минималистичный сайт. Как раз то что нужно если хотим использовать WordPress & Gutenberg.

Сайт оригинал
Сайт реплика

Ключевые особенности

  • используем максимально типовой конструктор блоков Gutenberg и WordPress
  • минимум кода и доп. плагинов
  • важно чтобы сайт выглядел хорошо и требовал минимум затрат на обслуживание
  • используем тему TT4

Процесс

  1. первым делом видим что сайт использует паттерны типа одностраничник или микро-лендинг, такие сайты лучше начинать с блока Cover
  2. внутрь блока Cover помещаем блок Группа. Чтобы упорядочить все последующие блоки.
  3. секция Hero – это группа внутри которой 2 картинки – логотип и фото группы
  4. затем добавляем остальной контент, адаптируя паттерны с учетом специфики типового блочного редактора WordPress

Результат

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

Паттерн для всего сайта можно забрать и повторить за 5 минут.

код паттерна
<!-- wp:cover {"customOverlayColor":"#040402","isUserOverlayColor":true,"minHeight":100,"minHeightUnit":"vh","align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}}} -->
<div class="wp-block-cover alignwide" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70);min-height:100vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#040402"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"className":"is-style-default","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"layout":{"type":"constrained","contentSize":"550px","wideSize":"1024px"}} -->
<div class="wp-block-group is-style-default" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:group {"align":"wide","layout":{"type":"default"}} -->
<div class="wp-block-group alignwide"><!-- wp:image {"id":4,"sizeSlug":"large","linkDestination":"none","align":"full"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://linka.site/leprikonsy/wp-content/uploads/sites/67/2024/08/logo.svg" alt="" class="wp-image-4"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":6,"sizeSlug":"large","linkDestination":"none","align":"wide"} -->
<figure class="wp-block-image alignwide size-large"><img src="https://linka.site/leprikonsy/wp-content/uploads/sites/67/2024/08/guys-1024x683.jpg" alt="" class="wp-image-6"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:site-title {"textAlign":"center","style":{"typography":{"fontStyle":"normal","fontWeight":"700"}},"fontSize":"large"} /-->

<!-- wp:site-tagline {"textAlign":"center","style":{"elements":{"link":{"color":{"text":"#a2a2b5"}}},"color":{"text":"#a2a2b5"}}} /-->

<!-- wp:spacer {"height":"20px"} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center","orientation":"vertical"}} -->
<div class="wp-block-buttons"><!-- wp:button {"width":100,"className":"is-style-outline"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-outline"><a class="wp-block-button__link wp-element-button" href="https://music.apple.com/ru/artist/%D0%BB%D0%B5%D0%BF%D1%80%D0%B8%D0%BA%D0%BE%D0%BD%D1%81%D1%8B/452703656">Слушать на Apple Music</a></div>
<!-- /wp:button -->

<!-- wp:button {"width":100,"className":"is-style-outline"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-outline"><a class="wp-block-button__link wp-element-button" href="https://music.yandex.by/artist/677799">Слушать на Яндекс.Музыка</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:social-links {"iconColor":"black","iconColorValue":"#000000","iconBackgroundColor":"white","iconBackgroundColorValue":"#ffffff","openInNewTab":true,"size":"has-normal-icon-size","style":{"spacing":{"blockGap":{"top":"0","left":"var:preset|spacing|20"},"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}}},"layout":{"type":"flex","justifyContent":"center"}} -->
<ul class="wp-block-social-links has-normal-icon-size has-icon-color has-icon-background-color" style="padding-top:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20)"><!-- wp:social-link {"url":"https://www.youtube.com/user/infosuper8","service":"youtube"} /-->

<!-- wp:social-link {"url":"https://www.instagram.com/leprikonsy/","service":"instagram"} /-->

<!-- wp:social-link {"url":"https://vk.com/leprikonsy","service":"vk"} /-->

<!-- wp:social-link {"url":"https://www.facebook.com/LEPRIKONSY","service":"facebook"} /--></ul>
<!-- /wp:social-links -->

<!-- wp:embed {"url":"https://youtu.be/rUd2diUWDyI","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">

</div><figcaption class="wp-element-caption">Хали-гали, паратрупер</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"#c5c5c5"}}}},"textColor":"base"} -->
<p class="has-base-color has-text-color has-link-color"><strong>Организация концертов:  <a href="mailto:leprikonsy@gmail.com">leprikonsy@gmail.com</a></strong></p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="https://leprikonsy.com/%D0%A2%D0%B5%D1%85%D0%BD%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B8%CC%86_%D1%80%D0%B0%D0%B8%CC%86%D0%B4%D0%B5%D1%80_%D0%9B%D0%95%D0%9F%D0%A0%D0%98%D0%9A%D0%9E%D0%9D%D0%A1%D0%AB.pdf">Технический райдер</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="https://leprikonsy.com/%D0%91%D1%8B%D1%82%D0%BE%D0%B2%D0%BE%D0%B8%CC%86_%D1%80%D0%B0%D0%B8%CC%86%D0%B4%D0%B5%D1%80_%D0%B3%D1%80%D1%83%D0%BF%D0%BF%D1%8B__%D0%9B%D0%95%D0%9F%D0%A0%D0%98%D0%9A%D0%9E%D0%9D%D0%A1%D0%AB_.docx">Бытовой райдер</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|secondary"}}}},"textColor":"secondary"} -->
<p class="has-text-align-center has-secondary-color has-text-color has-link-color">© Группа «Леприконсы»</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

Далее просто адаптировать под свою специфику.

Ещё почитать