将带有专用 CSS 样式的自定义 HTML 添加到 Wordpress 上的现有主题

Question

我创建了一些自定义代码，因为我的朋友希望他们的主页上有一个很酷的悬停效果。因为我是新手，我真的很自豪我可以从头开始创建这个基于 flexbox 的容器（当然，在 youtube 教程的帮助下）。现在我正在努力将它整合到我主题的现有块结构中。我将 neve 作为主题运行，并且想用我的自定义 HTML 替换最上面的块（现在只是保存一个背景图像），并使用我的自定义 CSS 进行样式设置。我确信这应该是可能的，并且我相信这是一件相当简单的事情，我目前还没有得到。请帮助一位兄弟。作为参考，这是我要自定义的网站：www.thenewport.org（这只是我要替换的首页图片，即包含 5 座建筑物的图片）。

这是我自己制作的元素：https://codepen.io/janstanna/pen/VwmKNNJ

html:

  <div class ="box-zeeland" > Zeeland   </div>
  <div class ="box-normandie" > Normandy </div>
  <div class ="box-roffa" > Rotterdam </div>
  <div class ="box-Valencia" > Valencia  </div>
  <div class ="box-Adam" > Amsterdam </div>
<div class ="overlay" > </div>
</div> </span>

CSS：

*{
  padding: 0px;
  margin: 0px;
  box-sizing:border-box;
  }


  
  .container{
    width: 100%;
    height: 1066px;
    padding: 0px;
    margin-top: 100px auto;
    display: flex;
    background; #ddd; 
    font-family: Helvetica;
    color: white; 
    vertical-align: bottom;
    justify-content: bottom;
    align-self: flex-end;
}





.overlay {
    border: 2px #ddd;
    z-index: 10;
    font-size: 90px;
    position: absolute;
    left: 300; top: 300; right: 300; bottom: 300;
    /* top: 0; left: 0; */
    /* width: 100%; height: 100%; */
    /* display: -webkit-flex; */
    /* flex-align: center; flex-pack: center; */
    /* display: block; */
    /* clear: both; */
    background: rgba(0,0,0,0.0);
    text-align: center;
    color: white;
    font-family: Helvetica;
    font-weight: 600px;

  }

  
  .box-zeeland {
    height: 100%;
    padding: 0px;
    background-image: url(https://elnuevopuerto.org/wp-content/uploads/2021/01/Zeeland_header_The_New_Port_Verdonkerd.jpg);
    border: 3px solid #ddd;
    font-size: 30px;
    flex:1;
    transition: 1s;
    text-align: center;
    align-self: flex-end;
    order: 3;

  }
  
  .box-zeeland:hover{
    flex:3;
    background-image: url(https://elnuevopuerto.org/wp-content/uploads/2021/01/Zeeland_648x1066_DARK.jpg);
    order: 3;
  }

  .box-normandie {
    height: 100%;
    padding: 0px;
    background-image: url(https://elnuevopuerto.org/wp-content/uploads/2021/01/LNP_648_DARK.jpg);
    border: 3px solid #ddd;
    font-size: 30px;
    flex:1;
    transition: 1s;
    text-align: center;
    align-self: flex-end;
    order: 1;

  }

  .box-normandie:hover{
    flex:2;
    background-image: url(https://lenouveauport.org/wp-content/uploads/2021/02/IMG_0037.jpg)
    order: 1;
  }

  .box-roffa{
  height: 100%;
  padding: 0px;
  background-image:url(https://elnuevopuerto.org/wp-content/uploads/2021/01/rotterdam_Website_warmer_324_Verdonkerd.jpg);
  border: 3px solid #ddd;
  font-size: 30px;
  flex:1;
  transition: 1s;
  text-align: center;
  order:2;
}

.box-roffa:hover {
  flex:3;
  background-image: url(https://elnuevopuerto.org/wp-content/uploads/2021/01/rotterdam_Website_warmer_648_DARK.jpg);
  order: 2;
}

.box-Valencia{
  height: 100%;
  padding: 0px;
  background-image: url(https://elnuevopuerto.org/wp-content/uploads/2021/01/ElNuveopuerto_Header_Valencia_324_Verdonkerd.jpg);
  border: 3px solid #ddd;

  font-size: 30px;
  flex:1;
  transition: 1s;
  text-align: center;
  order: 4;
}


.box-Valencia:hover {
  flex:3;
  background-image: url(https://elnuevopuerto.org/wp-content/uploads/2021/01/ElNuveopuerto_Header_Valencia_648_DARK.jpg);
  order: 4;

}

.box-Adam{
height: 100%;
padding: 0px;
background-image:url(https://elnuevopuerto.org/wp-content/uploads/2021/01/DNPAMS001_324x1066_header_Verdonkerd.jpg);
border: 3px solid #ddd;
font-size: 30px;
flex:1;
transition: 1s;
text-align: center;
order: 5;

}


.box-Adam:hover{
  flex:3;
  background-image: url(https://elnuevopuerto.org/wp-content/uploads/2021/01/DNPAMS001_648_Header_DARK.jpg);
  order: 5;

}


  </style>```








  

I hope someone can help me, I've been stuck for a couple of days now! Thank in advance!

Answer 1

我刚刚尝试在安装了 Neve 主题的全新 WordPress 安装上运行您的代码。

一切正常，除了不要使用.container 作为弹性框的类，而是使用.container-flex 之类的东西。

.container 已分配给 Neve 主题中的某些 HTML。

我无法访问您要使用它的网站。但是，如果您只是需要将其添加到页面上，请使用自定义 HTML 块，粘贴您的 HTML 代码并保存页面。

<span> <div class ="container-flex">
<div class ="box-zeeland" > Zeeland   </div>
<div class ="box-normandie" > Normandy </div>
<div class ="box-roffa" > Rotterdam </div>
<div class ="box-Valencia" > Valencia  </div>
<div class ="box-Adam" > Amsterdam </div>
<div class ="overlay" > </div>
</div> </span>

然后点击自定义 > 附加 CSS，将您的 CSS 代码粘贴到那里，然后点击发布。那么您的代码应该可以按预期工作。