Agregar estilo a la página principal según el diseño de Figma utilizando ACFs en el Wordpress Backend

[moudev]

Descripción

• Agregar diseño en la página principal del sitio, este diseño tiene que ser en base al diseño de figma

• Para poder mostrar información personalizada desde el backend de Wordpress es necesario tener instalados los plugins;

  • https://www.advancedcustomfields.com/
  • https://www.wpgraphql.com/acf/

• Crear los campos personalizados según crea conveniente para mostrar la información en la página principal.

• Dentro de las secciones de los campos personalizados tiene que estar incluidos los datos que se mostrarán en el header.js component, ya que todo será administrado desde una misma página de Wordpress.

• Posibles secciones que pueden crearse para los ACFs:

  • Información para el Header
  • Información sobre nuestras motivaciones
  • Información sobre nosotros
  • Información sobre nuestras iniciativas

• Tiene que estar creada la página en Wordpress con el nombre; content-page-home y, los campos personalizados tienen que estar enlazados con ésa página para aprovechar la consulta con graphql por medio de la URL Slug de la página.

• Si no existe la página content-page-home mostrar mensaje en la pantalla con las instrucciones necesarias para configurar dicha página o mostrar enlace de la wiki del repositorio donde estarán las instrucciones generales para echar a andar el proyecto de forma local.

• Pequeño ejemplo de los posibles campos que se pueden crear y la forma en cómo serían consultados con graphql.

export const pageQuery = graphql`
  query {
    wpgraphql {
      page(id: "content-page-home", idType: URI) {
        id
        customFields {
          bodySectionHeader {
            firstSlogan
            secondSlogan
            joinButton {
              text
              href
            }
            backgroundImage {
              alt
              authorName
              authorProfile
              sourceUrl
              wpUrl
            }
          }
          bodySectionMotivations {
            title
            firstDescription
            secondDescription
            motivationsList {
              access {
                icon
                text
              }
              build {
                icon
                text
              }
              citizens {
                icon
                text
              }
              fight {
                icon
                text
              }
              help {
                icon
                text
              }
            }
          }
          bodySectionAboutUs {
            title
            firstDescription
            secondDescription
            moreButton {
              text
              href
            }
            image {
              alt
              authorName
              authorProfile
              sourceUrl
              wpUrl
            }
          }
          bodySectionInitiatives {
            title
            firstDescription
            secondDescription
            moreButton {
              text
              href
            }
            image {
              alt
              authorName
              authorProfile
              sourceUrl
              wpUrl
            }
          }
        }
      }
    }
  }
`

Capturas

• Diseño de Figma al momento de crear éste Issue