WordPress.所有创建原始主题的说明[自制很容易]

我想使用WordPress(WordPress)创建一个原创博客,但我认为有很多人这么认为。
除了HTML和CSS之外,WordPress还可以使用名为PHP的编程语言,因此阈值可能感觉很高。

但是,即使您不知道PHP,一些HTML和CSS知识也可以轻松自定义现有主题或原始主题,但它是WordPress最受欢迎的原因之一。

这一次,不了解PHP的WordPress初学者也与参考文章和建议的书籍汇总了创建原始主题。
如果您阅读本文,则应掌握整体流程以在WordPress中创建原始主题,您应该能够立即创建或自定义主题。
(另外,由于流量缩小并收集流量,因此它不会触及HTML和CSS。)

WordPress.准备

在WordPress中创建原始主题第一步从下载和安装文件开始。

Wordpress文件下载

立即下载WordPress文件。
主单元文件可以从WordPress官方网站(日语)下载。

WordPress.>日语

如果文件下载已完成,请解压缩并为文件夹提供易于理解。

构建本地环境并安装WordPress

WordPress.无法看到,因为它与浏览器一起在PHP中进行。
要在浏览器中检查PHP文件,您需要Apache和MySQL运行PHP和数据库。

为了创建原始主题,我们将首先构建一个可以将PHP移动到PC的本地环境并在本地创建它。

要构建本地环境并安装和移动WordPress,请使用名为MAMP的软件。

»初学者必须看到!如何在本地环境中移动WordPress(MAMP)

还有各种其他方式来构建本地环境,但使用MAMP等的第一个初学者是最简单且易于使用的。

WordPress.创建的原始主题

构建本地环境,然后在浏览器中可见WordPress文件时立即继续创建原始主题。

原始主题创作

作为基本生产的流动,

1.デザイン
2.使用HTML + CSS编码
3.为WordPress创建主题
4.到服务器

我认为创造更容易。

如果您习惯了,HTML + CSS编码和WordPress将能够同时进行,但您应该首先创建并创建要理解结构的顺序。

在WordPress中生成网页的系统

WordPress.可以通过部分读取文件。

因此,提前通过调用网站的每个部分来显示一个网页。

作为基本配置文件

  • index.php.
  • 头er.php
  • 侧巴栏杆
  • Footer.php.
  • function.php.

它由上述五个文件组成。

可以组合这些文件以生成一个网页。

这些都是

  • index.php.:首页上显示的文件
  • 包含标题.PHP:包括元标记,标题,标题等
  • Sidebar.php:包含侧面信息
  • Footer.php:包含页脚信息
  • function.php.:设置插件和仪表板等。

描述了上述信息。

查看要调用的代码

让我们来调用每个文件并查看它。您可以在以下代码中调用每个文件:

  • <?php get_header(); ?>:header.phpを呼び出す
  • <?php get_footer(); ?>:footer.phpを呼び出す
  • <?php get_sidebar();?>:sidebar.phpを呼び出す

此外,文件名称为自己

  • <?php get_template_part(‘ファイル名.php’); ?>:ファイル名.phpを呼び出す

可以使用它来调用它。

文件结构如下。

主题文件
├├index.php.
├├标题.php.
├├ffff f f f f f f
├├├sidebar.php
├─function.php.
──风格

所有文件都在同一目录上。

确保你可以称之为

好吧,让我们来看看代码早期正确的代码并检查简单的代码。

index.php.

&lt;?php get_header(); ?&gt;

&lt;div id="main"&gt;
&lt;p&gt;メインコンテンツ&lt;/p&gt;
&lt;/div&gt;

&lt;?php get_sidebar();?&gt;

&lt;?php get_footer(); ?&gt;

标题.php,<head>などの情報も記述されます。

&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
   &lt;meta charset="uft-8"&gt;
   &lt;link rel="stylesheet" href="&lt;?php bloginfo('stylesheet_url'); ?&gt;" &gt;

   &lt;title&gt;    &lt;?php bloginfo('name'); ?&gt;   &lt;/title&gt;

&lt;/head&gt;
&lt;body&gt;
   &lt;div id="header"&gt;

&lt;p&gt;ヘッダー&lt;/p&gt;

&lt;/div&gt;

侧巴栏杆

&lt;div id="sidebar"&gt;

&lt;p&gt;サイドバー&lt;/p&gt;

&lt;/div&gt;

Footer.php.

&lt;div id="footer"&gt;

&lt;p&gt;フッター&lt;/p&gt;

&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

style.css.

#header,#sidebar,#main,#footer{
  border:solid 1px #000;
  margin:10px;
}

如果您实际运行它,它看起来像较低的图像。

截图2016-03-22下午5.10.04

当我问这个时,我认为我实际上确实确保标题和页脚被称为index.php。

创建顶页(index.php)

你有没有听过每个文件?

现在我想根据以前的内容解释更多的WordPress页面。

我们将解释以下图像的页面。

截图2016-03-22下午5.28.49

此页面上的代码将是完全不同的代码。

所以我想检查index.php等每个文件,一个逐个。

index.php.

首先是index.php的内容

&lt;?php get_header(); ?&gt;
&lt;div id="main"&gt;


&lt;?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
?&gt;

&lt;div &gt;
	&lt;h2&gt;&lt;a href="&lt;?php the_permalink();?&gt;"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/h2&gt;
	&lt;?php the_content();&gt;
&lt;/div&gt;

&lt;?php  endwhile;  endif;  ?&gt;

&lt;/div&gt;
&lt;?php get_sidebar();?&gt;

&lt;?php get_footer(); ?&gt;

好吧,如果你看它,“有很多不知道的笔记…我认为也有人认为,但我们将一个接一个地解释一下。

首先,让我们看看代码的中心。

  • <?php the_permalink();?>:個別記事へのリンク
  • <?php the_title(); ?>:個別記事のタイトル
  • <?php the_content();>:個別記事の本文

它是这样的。

下一页

&lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&gt;

//さっき説明したもの省略

&lt;?php endwhile; endif;  ?&gt;

我将解释早先剩下的剩余代码。
这些代码在中心,

“只显示WordPress中的文章”

这是内容。由于中心是文章和文本的标题,因此整个代码的含义是

显示所有标题标题和WordPress中的文本

关于它。

以下是index.php中主要内容部分的描述。

接下来,创建标题。

头er.php

让我们来看看整个代码。

&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;

&lt;meta charset="uft-8"&gt;
&lt;link rel="stylesheet" href="&lt;?php bloginfo('template_url'); ?&gt;/style.css" /&gt;

&lt;title&gt;
&lt;?php bloginfo('name'); ?&gt;
&lt;/title&gt;


&lt;/head&gt;
&lt;body&gt;
&lt;div id="page"&gt;

&lt;div id="header"&gt;


&lt;h1&gt;&lt;?php bloginfo('name'); ?&gt;&lt;/h1&gt;
&lt;h2&gt;&lt;?php bloginfo('description'); ?&gt;&lt;/h2&gt;

&lt;img src="&lt;?php bloginfo('template_url'); ?&gt;/top.png" width=1024px&gt;

&lt;/div&gt;

好吧,这里有很多事情,这段代码不能在通常的HTML中看到。

我们总结了无法可识别的代码和每个代码的含义。

  • <?php bloginfo(‘name’); ?>:ブログのトップページのurl
  • <?php bloginfo(‘description’); ?>:ブログのサブタイトル
  • <?php bloginfo(‘template_url’); ?>:テーマのアドレス

它是这样的。

如果仔细参考图像和主题,请说明一个警告点<?php bloginfo(‘template_url’); ?>请注意,在指定主题后,您需要指定具有映像的目录。

Footer.php.

&lt;div id="footer"&gt;

&lt;p&gt;Copyright © Uetani Ryota All Rights Reserved.&lt;/p&gt;

&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

此页脚类似于普通的HTML。特别是,WordPress没有唯一的内容。

关于侧边栏

好吧,让我们尝试反映仪表板小部件的设置,但它是一个侧边栏。

首先,您需要将以下内容写入function.php以显示仪表板窗口小部件。

&lt;?php

if ( function_exists('register_sidebar') )

  register_sidebar();

?&gt;

这将在仪表板上显示小部件。

接下来,将窗口小部件的内容显示为sidebar.php。

&lt;div id="sidebar"&gt;
  	&lt;ul&gt;
  		&lt;?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?&gt;
  	&lt;li&gt;

  		&lt;h3&gt;Categories&lt;/h3&gt;
  			&lt;ul&gt;
  		&lt;?php wp_list_categories('title_li='); ?&gt;
  			&lt;/ul&gt;
  	&lt;/li&gt;
  		&lt;?php endif; ?&gt;
  	&lt;/ul&gt;

&lt;/div&gt;
&lt;div id="clearfix"&gt;&lt;/div&gt;

窗口小部件设置现在反映在侧栏.PHP中。

关于style.css.

发布页面上次解释的CSS来源。

@charset "utf-8";
/*
Theme Name: Original
*/
#page{
  width:680px;
  margin:0 auto;

}
#header{
  margin-bottom:10px;
  background:#fff;
}

#main{
  width:500px;
  float:left;
}
#main div{
  width:500px;
  height:100px;
  background:#fff;
  margin-bottom:5px;
}
#main div h2{
  margin-bottom:10px;
}
#main div p{
  margin-bottom:10px;
}
#sidebar{
  width:170px;
  float:right;
  background:#fff;
}
#footer{
  margin-top:0px;
  text-align: center;
  background:#fff;
}

ul,li{
  list-style-type:none;
}
li h2{
  text-align: center;
  border-bottom:solid 1px #eee;
  margin:5px 0;
}
li{
  margin:2px 0;
}
#clearfix{
  content:".";
  display:block;
  clear:both;
}

body {
  font-family: " メイリオ",Meiryo,Osaka," ヒラギノ角ゴ ProW3","Hiragino Kaku Gothic Pro"," MS Pゴシック","MSPGothic",sans-serif;
  font-size:15px;
  background:#f2f2f2;
  color:#1f1f1f;
}
a{
  text-decoration: none;
  color:#0000ff;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
form,input,p,blockquote,th,td {
  margin:0;
  padding:0;
}
img {
  border:0;
  vertical-align: top;
}

可以看出它基本上是普通的CSS,就像你所看到的那样。

但是,在编写WordPress Style.css时只有一个警告。

Style.css开头有以下评论:

/*
Theme Name: Original
*/

在这里,我们描述了WordPress主题的名称。

如果您未描述此操作,WordPress主题名称不会反映生产,或插件将有缺陷,因此请务必写入。

顺便说一下,我在这里解释了,但应该做些什么样的风,Stocker.jp的文章非常容易理解。

也许是最易懂的WordPress主题制作教程
也许是最易于理解的WordPress主题生产教程| StockR.JP /日记

通过阅读上述文章并执行上述内容,基本博客应该完成。
这很好,但是更深入了解,自定义易于使用,或添加原始功能是方便的。

了解条件分支和模板标签和模板文件

WordPress.允许您使用“条件分支”自由自定义。
条件分支是非常基本的,如果它们被编程,但他们第一次触摸它们的人可能有点困难。

如果您自定义WordPress,则肯定会记住条件分支和定制帖子类型
如果您自定义WordPress,则肯定会记住条件分支和定制帖子类型

此外,WordPress有一个“模板标签”或“模板文件”,即使是初学者也很容易运行,即使是初学者创建一个非常简单的功能和想要的欲望。

模板标记

模板标签只有WordPress标签,可使用文章和链接,或显示文章列表和类别列表。
如果使用模板标签,则可以轻松地编写您无法在PHP中编写程序的标记。

但是,很难记住,因为有很多。所以,在第一次开始时,我想知道必要并复制它。
我会逐渐记住你经常使用的东西。

WordPress.模板标记集合|初学者即时练习和可用于工作的副本
WordPress.模板标记集合|初学者即时练习和可用于工作的副本

模板文件

WordPress.是一个模板文件,它是用于创建所需页面的文件,例如CSS文件(STYLE.CSS)或文章页面(Single.php)。
基本文件在已下载WordPress的文件中排列。

如果您使用模板文件良好,您可以创建一个灵活的方便站点,因此它是您想要理解的知识之一。

如果要自定义WordPress,请使用要记住的模板文件
如果要自定义WordPress,请使用要记住的模板文件

发布创建的主题

好吧,到目前为止,您应该能够使用WordPress创建一个博客。

从这一点来看,我们将添加一个上面的ove和发布在本地环境中的WordPress的步骤。

获取域获取和租赁服务器

我想让自己的博客非常多,所以我想保留自己的域名。您还需要租一个相应的服务器来移动WordPress。

为了运行WordPress,您了解推荐的租赁服务器和域公司的博客,以及您理解的博客容易理解。
请仔细考虑并选择。

»如果它是WordPress这是安全的!建议的租赁服务器和选择时的点

顺便说一下,在我们的网站上,租赁服务器“x服务器”和域使用“com”。

上传并将主题发布到服务器

嗯,让我们将文件上传到如果借用服务器。

有一个文件需要重写,但如果您这样做,则应在没有任何问题的情况下上传。

上传Wordpress原始主题|网络创建者框
上传Wordpress原始主题|网络创建者框

如果没有特定问题,这应该是可选择的。
如果选择您创建并启用的主题,则会很好,并且原始主题博客完成。

由于更好地在发布前设置了一点,因此请设置以下内容。
别忘了!在发布WordPress中的网站之前,请检查要设置的项目

插件介绍

有一个“插件”,可以在WordPress中轻松实现各种功能。

但是,我认为有太多而且我不知道我是否应该把它,所以我之前在这个网站上介绍过。推荐WordPress插件文章让我们作为参考安装。

此外,“我想要这样的函数。”作为插件存在,所以让我们如有必要地看。

作为一个备注,它方便,如果您安装了太多的插件,网站显示很慢,插件冲突和错误。
此外,如果您没有任何问题,请检查一下。

Wordpress推荐的初学者书

好吧,我们总结了在WordPress中建立一个博客的程序,有各种文章,但也建议通过书籍来制作系统站立和理解。

WordPress.上有很多书籍,但其中,我们将介绍仔细和上面介绍解释所涵盖的推荐书籍。

暂时,如果您有以下书籍,毫无疑问。

来自基础知识的网络工程师的基本课程
Takahashi.
SB Creative.
销售排名:27,832

创建网站或公司网站

WordPress.可以轻松生产除博客之外的公司网站等网站。

相反,最近的企业网站毫不夸张地说我们使用WordPress。
(参考→10个具有WordPress创建的优秀网站

为了创建一个不是博客的网站,一点点提示是一个小小的技巧,新知识也是必要的,但是网络设计配方将写一篇非常容易理解的文章,所以让我们参考它。!

在制作一个不是Wordpress中不是博客的网站时的各个时代(用样品)
在制作一个不是Wordpress中不是博客的网站时的各个时代(用样品)

此外,如果您想更全面地创建企业网站,还有一本好书,别无选择,但不是以下书籍。它是亚马逊WordPress类别中的顶级书籍。

WordPress.也推荐用于初学者

是吗?

WordPress.看起来像是一个看似的门槛,但它会很容易表达,所以你怎么试试这个机会?

文章中介绍的博客写了很多有助于了解WordPress的文章,所以如果你被困,请检查它!
最后,希望在认真经营博客的人将介绍一本书阅读。

顺便说一下,如果您学习编程,包括主题生产技术提升(技术提升)被推荐。它是通过命令达到学习目的的定制。

我是免费的咨询,所以请检查一下。

[阅读其他WordPress的良好建议。
WordPress.权限设置中的基本知识和推荐设置
WordPress.登录如何登录如何解决方案

[博客管理所需的文章]
我想设置它!在介绍Google Analytics后首先执行基本设置

给这篇文章的人

穂積 かずゆき

Creive编辑器。蕾霍纳首席执行官首席执行官听到 //hear.jp 我们还经营音频发布服务。爱好是Web服务,SEO,动漫,游戏,露营,汽车等。