wordpress模板

wordpress模板

You know what my favorite WordPress development gigs are? The ones where I get to start from scratch and build out a theme on my own. I really don’t like having to jump into a previously modded theme and try to figure out what’s going.

您知道我最喜欢的WordPress开发演出是什么吗？ 我可以从头开始，自己建立一个主题。 我真的不喜欢跳入以前修改过的主题并试图弄清楚发生了什么。

So, let me show you my own quick fixes for skinning a WordPress theme. I’ll cover some of the obvious tweaks that you’re likely to encounter and show you how to jump into the fray fast.

因此，让我向您展示自己的WordPress主题外观快速修复程序。 我将介绍一些您可能会遇到的明显调整，并向您展示如何快速进入竞争。

步骤1：儿童主题或半身像 (Step 1: Child Theme or Bust)

I cover creating a child theme extensively in other posts, but here’s the down and dirty version. Create a folder in your themes directory and save the below CSS as style.css and drop it into the folder:

在其他帖子中，我将广泛介绍如何创建儿童主题 ，但这是简陋的版本。 在主题目录中创建一个文件夹，并将以下CSS保存为style.css并将其放入该文件夹中：

[sourcecode language=”css”]

[源代码语言=“ css”]

/* Theme Name: Twenty Twelve Child Template: twentytwelve */

/ *主题名称：十二十二个孩子模板：二十十二* /

@import url("../twentytwelve/style.css");

@import url(“ ../ twentytwelve / style.css”);

[/sourcecode]

[/源代码]

This example takes the default Twenty Twelve theme in WordPress and makes it your own. If you have your own theme, just replace the theme folder name in both the Template tag and the import statement.

本示例采用WordPress中默认的二十二十二主题，并使其成为您自己的主题。 如果您有自己的主题，只需在Template标签和import语句中替换主题文件夹名称即可。

Now, go to “Appearance” > “Themes” and select your child theme. This is the safest way to build code, and frankly it’s a lot less distracting to work with a blank slate.

现在，转到“外观”>“主题”，然后选择您的子主题。 这是构建代码的最安全的方式，并坦言这是少了很多分心的工作从一张白纸。

步骤2：修改标题图像 (Step 2: Modify the Header Image)

In WP 3.5+ and some older themes, you typically have the ability to upload a site header through an “Appearance” > “Header” or “Appearance” > “Theme Options” dialogue. If your theme has this available, it’s better to use it than to hardcode a graphic.

在WP 3.5+和某些较旧的主题中，通常可以通过“外观”>“标题”或“外观”>“主题选项”对话框上载网站标题。 如果您的主题有此功能，最好使用它而不是对图形进行硬编码。

But, for you Ranger Joes out there who need to hardcode the image, you can typically find what you’re looking for in the header.php file. The Twenty Twelve theme has a wonderfully complex example of how to bloat some simple code. So, if you can work through this code, you should be fine:

但是，对于需要对图像进行硬编码的Ranger Joes而言，通常可以在header.php文件中找到所需的内容。 “十二十二”主题有一个非常复杂的示例，说明如何膨胀一些简单的代码。 因此，如果您可以通过这段代码来工作，那应该没问题：

[sourcecode language=”php”]

[源代码语言=“ php”]

<?php $header_image = get_header_image(); if ( ! empty( $header_image ) ) : ?> <a href="<?php echo esc_url( home_url( ‘/’ ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a> <?php endif; ?> [/sourcecode]

<？php $ header_image = get_header_image(); if(！empty($ header_image))：？> <a href="<?php echo esc_url( home_url('/')); ?>“> <img src =” <？php echo esc_url($ header_image); ？>“ class =” header-image“ width =” <？php echo get_custom_header()-> width;？>“ height =” <？php echo get_custom_header()-> height;？>“ alt =”“ /> </a> <？php endif; ？> [/源代码]

You can modify this to be:

您可以将其修改为：

[sourcecode language=”php”]

[源代码语言=“ php”]

<a href="http://www.yoursite.com"><img src="http://www.yoursite.com/some-folder/image.jpg" class="header-image" width="1000px" height="288px" alt="" /></a>

<a href="http://www.yoursite.com"> <img src =“ http://www.yoursite.com/some-folder/image.jpg” class =“ header-image” width =“ 1000px “ height =” 288px“ alt =”“ /> </a>

[/sourcecode]

[/源代码]

Fit the width and height as you need it. Since you have a header-image class, you can get in there and add some extras as needed like borders, max-width, and the like.

根据需要调整宽度和高度。 由于您具有标头图片类，因此您可以进入其中，并根据需要添加一些额外内容，例如边框，最大宽度等。

步骤3：导入Web字体 (Step 3: Import a Web Font)

A really great way to give a site a personal touch is with a unique font for headings. I’m a big fan of the Google.com/fonts selection, and they’re incredibly easy to implement.

赋予网站个性化效果的一种非常不错的方法是使用独特的标题字体。 我是Google.com/fonts选择的忠实拥护者，而且它们易于实现。

A simple example is one of my favorite fonts — Simonetta. It has four styles, so you can get a lot of leverage out of it. If you want to import all four styles, you would place this in your style.css file for your theme.

一个简单的例子是我最喜欢的字体之一-Simonetta。 它有四种样式，因此您可以从中获得很多影响。 如果要导入所有四种样式，则可以将其放置在主题的style.css文件中。

Note: if you have a child theme, make sure this import code comes after you import the parent theme’s style.css.

注意：如果您有子主题，请确保在导入父主题的style.css 之后此导入代码出现。

[sourcecode language=”css”]

[源代码语言=“ css”]

@import url(http://fonts.googleapis.com/css?family=Simonetta:400,900,400italic,900italic);

@import url(http://fonts.googleapis.com/css?family=Simonetta:400,900,400italic,900italic);

[/sourcecode]

[/源代码]

Now, you can declare this font for any of your styles — from paragraphs to headings or even specific classes. To make this webfont work for your H1 tags sitewide, simply add this to your style.css file:

现在，您可以为任何样式声明该字体-从段落到标题，甚至是特定类。 要使此webfont适用于整个站点的H1标签，只需将其添加到您的style.css文件中：

[sourcecode language=”css”]

[源代码语言=“ css”]

h1 { font-family: ‘Simonetta’, cursive; font-size:30px; } [/sourcecode]

h1 {font-family：'Simonetta'，草书； font-size：30px; } [/源代码]

步骤4：颜色，颜色，颜色！ (Step 4: Colors, Colors, Colors!)

Another really easy way to give a site its own look is by changing up the color scheme. While you’re going to hear all kinds of arguments about readability (and you should pay attention to them), I’m going to skip them and just say this: keep the fonts and their background high-contrast. Period. That being said, let’s change some of the colors in a theme, like the background colors and heading fonts.

赋予网站独特外观的另一种非常简单的方法是更改​​配色方案。 当您将听到有关可读性的各种论点(并且应该注意它们)时，我将跳过它们，只是这样说：保持字体及其背景的高对比度。 期。 话虽这么说，让我们更改主题中的某些颜色，例如背景颜色和标题字体。

Before jumping into your style.css doc, look to see if your theme has an “Appearance” > “Background” or “Appearance” > “Theme Options” like interface for changing the colors. It’s just so much easier to work with this and identify conflicts if you use the built in functionality for background colors. Most themes have them these days.

在进入style.css文档之前，请先查看您的主题是否具有“外观”>“背景”或“外观”>“主题选项”，例如用于更改颜色的界面。 如果您将内置功能用于背景颜色，那么使用它并识别冲突就容易得多。 这些天大多数主题都有它们。

If not, in your CSS, you simply need to define this in your body element:

如果没有，只需在CSS元素中定义它：

[sourcecode language=”css”]

[源代码语言=“ css”]

body { background-color:red !important; } [/sourcecode]

正文{background-color：red！important; } [/源代码]

Note that I used the !important code to override any other functionality that may have been blocking my code. When working with a child theme, this can happen and an easy workaround is to just throw down the !important statement after your code.

请注意，我使用！important代码覆盖了可能阻塞了我的代码的所有其他功能。 使用子主题时，可能会发生这种情况，一种简单的解决方法是在代码后放下！important语句。

You may run into the same problem with font colors (and other styles for that matter).

您可能会遇到字体颜色(以及与此相关的其他样式)相同的问题。

[sourcecode language=”css”]

[源代码语言=“ css”]

h2 { color: red !important; }

h2 {颜色：红色！重要； }

[/sourcecode]

[/源代码]

Now, if you look at your site and don’t see any changes, it’s likely because that particular heading may have its own class. For example, the default setting for the Twenty Twelve H2 on a post is to wrap the heading in a “entry-title” class that is also a link. So you will need to customize this in your style.css file like this:

现在，如果您查看自己的站点，但未看到任何更改，则可能是因为该特定标题可能具有其自己的类。 例如，帖子上“二十二十二岁H2”的默认设置是将标题包装在“条目标题”类中，该类也是链接。 因此，您需要像这样在style.css文件中自定义此代码：

[sourcecode language=”css”]

[源代码语言=“ css”]

.entry-title a { color: red !important; }

.entry-title a {颜色：红色！important; }

[/sourcecode]

[/源代码]

If the element you want to change is in some container with an ID, you may have to declare the style like this:

如果要更改的元素位于具有ID的某个容器中，则可能必须声明如下样式：

[sourcecode language=”css”]

[源代码语言=“ css”]

#entry-title a { color: red !important; }

＃entry-title a {颜色：红色！important; }

[/sourcecode]

[/源代码]

Note that I used a “#” symbol instead of the period before the declaration. This tells your theme to look for something with the ID of “entry-title”, like:

请注意，我使用“＃”符号代替声明前的句点。 这告诉您的主题寻找ID为“ entry-title”的内容，例如：

[sourcecode language=”html”]

[源代码语言=“ html”]

<div id="entry-title"><h2><a href="#">Some Heading</a></h2></div>

<div id =“ entry-title”> <h2> <a href="#">某些标题</a> </ h2> </ div>

[/sourcecode]

[/源代码]

第5步：集成滑块/图像轮播 (Step 5: Integrate a Slider/Image Carousel)

I think every WordPress developer has their favorite slider, but mine is Revolution Slider. It’s not free, but it’s worth a few bucks for all the functionality. It takes some work to get the slides looking amazing, but the end result can be absolutely stunning.

我认为每个WordPress开发人员都有自己喜欢的滑块，但是我的是Revolution Slider 。 它不是免费的，但所有功能的价值都值得。 需要一些工作才能使幻灯片看起来很棒，但是最终结果可能绝对令人赞叹。

Many premium themes come with a built-in slider, but if you need a freebie to get you started, check out Meta Slider. It has several options and a couple of different image carousels built into a single plugin.

许多高级主题都带有内置的滑块，但是如果您需要免费赠品以入门，请查看Meta Slider 。 它具有多个选项，并且在单个插件中内置了几个不同的图像轮播。

Whatever slider or carousel system you use, dropping one into the home page and adding some images can have a dramatic impact on the design and can take just a few minutes to implement.

无论您使用哪种滑块或轮播系统，将其拖放到主页中并添加一些图像都会对设计产生重大影响，并且只需几分钟即可实现。

结语 (Wrap Up)

With a custom header graphic, fancy font work, and changing up the color scheme of some of the primary elements like headings and backgrounds — you too can quickly mod a theme to have a custom look for whatever brand you may be working with.

有了自定义的标题图形，精美的字体，并更改了诸如标题和背景之类的一些主要元素的配色方案，您也可以快速修改主题，以针对与您合作的任何品牌定制外观。

How often are you called upon to tailor a WordPress theme? Do you prefer starting from scratch, or are you content to build a child theme and make the existing WordPress design your own?

您多久被要求量身定制一个WordPress主题？ 您是喜欢从头开始，还是愿意建立一个儿童主题并使现有的WordPress设计成为您自己的主题？

翻译自: https://www.sitepoint.com/how-to-tailor-a-wordpress-template-in-15-minutes/

wordpress模板