如何在WordPress中创建自定义子弹点

技术教程 2022年2月10日
2007 0

子弹点是在网上传达某些信息的特别有效方法.当然，他们也可以很好地打印，但随着我们都知道，在网上阅读是不同的.人们扫描更多.他们期望更多的图形呈现文本.他们的眼睛变得疲惫.

Bit the bullet--get into your CSS and get your bullet points up to speed. bite子弹-进入您的CSS并获取您的CSS并获取您的CSS并获取您的CSS并获取您的CSS并获取您的CSS并获取您的CSS并获取您的CSS并获取您的CSS并获取您的CSS并获取您的CSS并获取您的CSS并获取您的CSS并获取您的CSS并获取您的CSS并获取您的CSS并获取您的CSS并获取您的CSS并获取您的CSS并获取您的CSS并获取您的CSS并获取您的CSS并获取您的CSS并获取您的CSS并获取您的子弹指向速度.

如果我们要快速列出Bullet积分的好处，我们可能会说他们...

  • 使易于阅读
  • 分解复制
  • 画扫描仪的眼睛
  • 强调点之间的统一思想
  • 快速传达想法

所以子弹点很重要，尤其是文本重型帖子.让你的子弹点的造型也很重要.有些人可以嘲笑那个，但任何关心他/她的话的作家都知道，当项目符号列表看起来不对时，它似乎从内容本身带走了.

如下，我们将介绍一些基本原则，您可以用来获取您希望它们的项目符号列表.

这里是我们将在本文中介绍的内容:

创建子主题

Using a child theme keeps you happy and cool. 使用子主题让您快乐和酷.

在对您的主题进行更改时，最好使用子主题.这样，如果您的主题更新，则不会丢失更改.因此，这就是我们将在本教程中使用的(默认二十十二个WordPress主题的子主题).您可以了解如何在这里在这里制作一个孩子主题.

注意:一些更高级的主题可能已经有一个特殊的样式表，其中包含了定制的主题.如果让孩子主题似乎没有为您工作，您可能会在网上或主题作者寻找解决方案.如果您在与您的特定主题中遇到一个孩子主题的问题，那么其他人可能有同样的问题.

主题子弹点样式

子弹点的风格由您的主题控制.因此，为了改变这种风格，您需要知道您的主题如何在样式表中引用它们.

您的子弹点的风格将是您主要内容风格的份额.许多主题可能会将整体内容分类为"入门内容".换句话说，它们将创建一个名为"入门内容"的"类"，然后引用样式表中的名称(入门内容).

但也有一个机会，您的主题可能会给它一个不同的名字，所以你应该做的第一件事是找出什么"类"你的主题分配给帖子上的内容.

查找内容的类名

为了找到内容的类名，您只能转到已发布的帖子，然后查看该页面的代码.您可以通过右键单击该页面，然后单击"查看页面源"或"查看源，"等.

下一个，从帖子中选择前几个单词，并为这些单词搜索代码.当您找到它们时，您还应该看到一些关于它们的代码，这将告诉您您的主题给出了页面上的内容的类.

我在默认的二十十二个主题中做到了这一点，我发现课程是"入门内容".如上所述，你的可能是一样的，但它也可能是不同的.在您的内容顶部附近寻找div内的"类"标记.

class-entry-content

*注意:您的主题有可能比以上更复杂，您可能会找到几个类.如果是这样，只需继续尝试每一个，直到找到适合您的那个.

Bullet Points

的HTML代码

将使用两个不同的标签创建WordPress中的符号点列表.

首先有

    标记."UL"代表"无序列表"，而不是
      -它代表"有序列表".无序列表不会编号(它将有项目分子).订购列表是一个编号列表.

      子弹列表中的下一个标记是

    1. 标记.这代表了"列表项目".

      如果在WordPress编辑器中制作子弹列表，然后切换到"文本"视图，则可以在操作中看到这两个标签.

      html-tags

      带CSS

      的样式项目符号点
      好的，现在进入有趣的部分-实际上自定义了子弹列表.如果您还没有，请记住激活您的孩子主题.现在，您需要转到孩子主题中的样式表.(外观>编辑器>样式表- Style.css)

      记住，在我的主题中，我的内容的课程被命名为"入门内容".因此，这就是我将在下面的例子中使用的.如果您发现您的课程被命名为其他东西，只需替换即可替代.

      首先，让我们来看看二十十二个主题中的Bullet列表的默认样式.从那里，我们将逐渐改变一些事情.

      这是默认的外观.

      default

      更改字体

      我们将从真正简单的东西开始.这将让您了解如何改变的事情.我们只需用以下CSS制作字体粗体.

      .entry-content ul li{
 font-weight: bold;
 }

      这是结果.

      bold

      而对于第一个，我将只是向您展示我新创建子主题的样式表看起来像.

      stylesheet

      当然你也可以改变颜色.作为一个戏剧性的例子，我们将通过添加"颜色:#00ff00;"

      来将列表更改为亮绿色.

      .entry-content ul li{
font-weight: bold;
color: #00FF00;
}

      在这里是它看起来的看法.

      green-bullets

      添加不同的样式

      好的，现在我们要开始改变子弹自己.我们将通过添加此位CSS代码:List Style:Circle;

      我的CSS代码现在如下所示:

      .entry-content ul li{
 font-weight: bold;
 list-style:circle;
 }

      是结果.

      empty-circles

      您还可以通过更改

      将那些空圆圈更改为正方形

      list-style:circle;

      list-style:square;

      和这是结果.

      squares

      还有"光盘"样式，这是一个填充的圆圈.

      .entry-content ul li {
font-weight: bold;
list-style: disc;
}

      这是结果:
      disc

      您可以使用其他值可以与"列表样式"属性一起使用，其中许多适用于使用数字(有序列表).您可以找到<a href="http://www.w3schools.com/cssref/pr_list-style-type.asp" target="_blank"读数在这里.

      使用图像作为项目符号

      您还可以将图像添加为子弹点.这样做的方法是添加以下行为CSS代码:

      list-style-image:url(url-of-your-image);

      所以，例如，如果保持字体粗体，那么您的CSS代码会如下所示:

      .entry-content ul li{
 font-weight: bold;
 list-style-image:url(https://mysite.com/images/bullet-16x16.png);
 }

      这里看看我上传的图像.它看起来非常好，但你会注意到图像的对齐有点偏离.图像看起来有点太高.

      images-off

      如果发生在您身上，您可以采取不同的方法来使用图像.而不是使用"列表样式图像"属性，可以将图像用作背景.这将允许您移动图像以使其看起来正确.

      因为我们将图像用作背景，我们需要指示我们不想要"正常"的子弹点.为此，我们将使用"列表样式类型:无;"除了背景CSS代码.

      代码我最终放入我的CSS文件看起来像下面的东西.5px数字是我玩的东西，直到它看起来正确.当然你的形象可能不会以与我的方式完全相同的方式，所以你必须自己玩东西，直到它看起来正确.

      .entry-content ul li {
font-weight: bold;
list-style-type: none;
background: url(https://mysite.com/bullet-16x16.png) no-repeat 7px 5px;
margin: 0;
padding: 0px 0px 3px 35px;
vertical-align: middle;
}

      和这是结果.

      images-as-background

      添加Unicode字符

      您可能想要尝试弹点的其他东西是Unicode字符.Unicode字符是❤...✈...✽.

      如上所述，通过放入"列表样式类型:无;"它消除了正常的子弹点.所以这就是你需要在这里做的事情.(再次，我们不希望正常的子弹点出现.我们将替换具有Unicode字符的人.)

      我们也将添加一个不同的属性，指示该角色应该在列表项之前进行.

      这里看看使用∅字符作为子弹点.

      .entry-content ul li {
list-style-type: none;
font-weight: bold;
}
.entry-content ul li:before {
content: "∅";
padding-right: 5px;
}

      在这里是它看起来的看法.

      html-symbol

      如果您希望从文本中创建不同颜色的字符，则只需将颜色属性添加到顶部"以更改文本颜色，或将颜色属性添加到底部部分以更改子弹点颜色.或者，当然，您可以向两者添加颜色属性.

      在此示例中，我已将Color属性添加到两者.

      .entry-content ul li {
list-style-type: none;
font-weight: bold;
color: #2E89FF;
}
.entry-content ul li:before {
content: "∅";
padding-right: 5px;
color: #FFA62F;
}

      和这是结果.

      different-colors

      您可以看到，您不会在CSS文件中使用特殊代码来获取Unicode字符.只需复制Unicode字符本身并将其粘贴到CSS代码中.

      您可以找到这里的这些符号列表.这是一个很长的名单，所以这里有一些更受欢迎的:箭头，框绘制，块元素，几何形状，杂项符号，和 dingbats .

      wpmu dev的子弹列表

      ，最后，我们将结束这个.正如您可能已经注意到的那样，WPMU上的子弹点列表有一个带有深蓝色文本的浅蓝色子弹点.通过与Unicode字符在上面的文本中分离出文本中的子弹点来创建.

      我们用作子弹点的小蓝框是通过创建带CSS的框(这是您在下面看到的两个5px值)创建的.虽然这不是我们的样式表中的代码设置的方式，但下面的下面应给您相同的效果.

      .entry-content ul li {
padding-left: 30px;
color: #3D5365;
font-size: 90%;
position: relative;
list-style-type: none;
}
.entry-content ul li:before {
content: '';
position: absolute;
left: 10px;
top: 9px;
width: 5px;
height: 5px;
background-color: #7AA8CC;
}

      当然，这就是它的外观.(如果我们更改它，我将在此处包含一个图像，并在以后在以后阅读这一点.)

      wpmu-style

      咬子弹的时间

      你的子弹点看起来你想要它们吗?如果没有，也许是时候咬了子弹，挖到你的样式表，并让它们速度加速.

      照片信用: D.Sharon Pruitt

css(16)子弹(1)获取(1)
♥赞6

相关文章

发表回复