【编程初学者】记录了一个编程初学者在40天内制作WordPress商业网站的过程

2 年 ago

新, 韵

1 minute

一个刚开始学习编程的人使用WordPress从零开始构建并在线发布商业网站的记录。

因为要为亲戚的店铺创建网页，而我正好正在学习编程，所以我被要求来制作。在购买书籍，搜索并向他人询问的过程中，我一直在努力并成功地在40天内完成了从策划到发布。这就是我制作的网站。

在WordPress非常受欢迎的背景下，我认为像我当初那样，没有弄清楚到底需要什么，却说要去做的人并不少。为了帮助这样的人，我在这里记录了从策划到发布的整个过程。我想写的不是具体的代码和操作，而是大致的步骤、所需时间以及所需准备的内容。

顺便说一下，那时的我可以写基本的HTML/CSS，也能理解一些Ruby或Python的代码，比如数组和变量等非常基础的东西，但水平限于此。

由于我仍然是一个编程新手，因此可能会有错误或更好的方法，请随意指正！

这篇文章所针对的人

初めてWordPressサイトを公開するにあたって、どの程度の手間とお金がかかるのか知りたい

我买的书(买っ

■适用于网站负责人的能理解WordPress的书籍：适用于各种业务网站的规划、设计、制作和运营的技巧。主要用于网站规划和设计等在开始编码前的阶段。能够了解在创建商务网站时应该考虑什么。

■ 学习使用WordPress进行网站设计：从网站制作到交付的第一步 (设计与创意)
在编码到发布的整个流程中都用到了它。书中有关于用PHP重写HTML文件、文件布局、在本地（个人电脑）进行开发、上传（在线发布）等具体步骤的描述，没有这些步骤，网站的发布是不可能的。

请参照视频。

■使用Bootstrap学习WordPress的Udemy课程
这是一门学习如何使用Bootstrap和WordPress的Udemy课程（共64课时，价格为1800日元）。该课程以英语授课且没有字幕。相对于书本，通过视频观看可以更加清楚地了解如何在哪个文件的哪个部分进行操作。

※ BootStrap是一个用于创建简单而时尚网站的组件集。即使没有它，也可以创建网站，但是使用模板可以轻松地创建出具有点击展开的标题栏和适应手机(与PC显示不同宽度)等功能，可以避免自己实现繁琐的功能。非常方便。

最初，WordPress.com？ WordPress.org？

既存のテーマ(テンプレート)を使用するなら.com、自分でHTML/CSSをゼロから組んで作るなら.orgです。今回の記事は.orgでの開発です。私の場合、やりたいことに対してテーマだと自由度が低かったため、ゼロからコーディングして.orgにて公開することにしました。

(2017/6/29追記)
一般企業(商用利用)ならcom/Commercial、機関系ならorg/Organizationで、SEO的にはどちらを選んでもよいそうです。コメントにてご指摘いただきました。(追記ここまで)

※ 本やサイトを探す時は、.comなのか.orgなのか常に注意すべし。特に本は.comの方が多いです。

策划至公开的过程

公開後の編集

计划

サイトイメージ(ゴージャスかシックか？基調色は？)

などを決めていきます。
サイトの出来は企画の段階で決まると言っても過言ではありません。ビジネス責任者(店長など)とよく話し合い、サイトのイメージ、サイトで実現したい来客数などを明確にしましょう。

2. 设计

根据企划书，我们将考虑需要的页面。比如以下这样。

アクセス

同業他社のサイトをたくさん見て参考にするのがおすすめです。項目・構成・デザインなど、とても勉強になります。コーディングの準備として、サイトデザインはまず手書きでラフ、その後ワイヤーフレームを作っておきます。

ワイヤーフレームツールは、以下のようなものがあります。
PowerMockup
Cacoo
Justinmind Prototyper

我使用了Justinmind Prototyper，它可以无限制地使用（Cacoo只能使用25个），而且还可以离线工作，非常方便。

您可以使用Recruit的Air Reserve或RESERVA等预约系统。
您可以在网站上嵌入日历或者链接到预约页面。

3. 收集素材

素材是指以下类似的东西。

画像

在设计网站时，需要列出所需的材料清单。
特别是对于文章的情况，明确谁来写是非常重要的。是店员给您写还是您自己来写。在最开始就明确这一点，以后会更加轻松。

4. 编程

根据用2创建的线框进行编码。

5. 将WordPress安装到本地服务器上

为了启动本地服务器，需要安装应用程序。
如果是Windows系统，则安装XAMPP；如果是Mac系统，则安装MAMP。

我将在这里解释为什么需要启动本地服务器。

练习用的服务器，本地服务器

Webサイト最终的目的是在互联网上向全世界公开。然而，我们无法将制作过程全部公开。这就是本地服务器的好处所在。

简单来说，
本地服务器：只可以在自己的电脑上查看
生产环境服务器：其他电脑也可以查看

此外，使用WordPress需要在服务器上安装WordPress。因此，首先在本地服务器上安装WordPress，在编码完成后，相应的代码将被转换为PHP（WordPress在PHP上运行），以确认其是否正常运行。

下载WordPress

从WordPress官网下载WordPress，并将文件安装到本地服务器上。这样就可以在本地服务器上使用WordPress了。

将HTML转换为PHP

将使用第4步创建的文件重写为适用于WordPress的格式。具体来说，有以下三点要注意。

固定ページへの書き換え

模板文件是什么？

在进行编码时，我记得每个页面都写了页眉和页脚。但是在WordPress中，我们可以将页眉和页脚部分模板化，这样只需修改一个文件就可以在所有页面上进行反映。

固定页面是指

2. 我在设计中举了以下页面结构作为示例。

アクセス

在这种情况下，文件转换如下：
首页：index.php（从html修改）
其他页面：固定页

如果要添加博客功能，可以使用发布功能。

7. 服务器合约

根据 5. 的提及，我们有本地服务器和生产环境服务器。本地服务器可以免费安装，但生产环境服务器（用于在线发布）需要付费订阅。有很多服务器选择，我选择了X服务器进行订阅。最便宜的计划大约是15,000日元/年。如果是为了WordPress的服务器订阅，还有自动安装功能，非常推荐。

8. 域名注册 (yu4 ming2 zhu4 ce4)

如果要建立网站，我想使用像○○.com这样的URL。为此，需要获得域名（需要付费）。只要○○部分没有被其他人注册，就可以指定喜欢的字符串。X服务器可以帮助获得域名，非常方便。（如果将服务器和域名分开购买，再进行连接可能会有些复杂……）对于X服务器来说，域名获取费用是1,620日元/年。合同以一年为单位。

9. 安装WordPress到服务器上

我要在生产环境的服务器上安装WordPress。如果是使用X服务器，他们有自动安装功能。如果选择手动安装，可以使用一个叫FileZilla的应用程序，自己放置文件并在线发布。

10. 上传到服务器

将使用6.生成的文件集（将这个文件集称为主题）上传到WordPress。您可以通过WordPress的管理界面进行上传。

11. 创建静态页面

在将HTML转换为PHP的同时，我还在本地的WordPress上创建了静态页面。我将把这些内容反映到生产环境（托管服务器）的WordPress上。我也会通过“媒体插入”上传图片等文件。

12. 公開 – Direct Translation: “公開”

其实，当你在第10步上传文件后，网站已经在线上发布了（其他电脑也可以访问）。WordPress无法将整个网站设置为私有（但可以设置单个文章为私有），所以如果想要设为私有，你需要自己进行一些设置。

13.公開後の編集

网站的发布只是一个开始而已。在发布之后，仍然需要根据需要进行编辑和更新，并且改进的空间是无穷的。

私の場合は9.で紹介したFileZillaというアプリケーションを使っています。すでに本番環境にアップロードしたファイルを個別にダウンロードしてきてローカルで編集、その後再度本番環境に再度アップロードすることで、オンライン公開しているサイトを編集できます。CSSを直したり、ヘッダーを編集したり。固定ページは、WordPress管理画面から簡単に編集できます(編集画面はとても見にくいので、間違いを避けるためにもテキストエディタを使うべし)。

最后

我已经写下了我40天的学习成果。如果这篇文章对即将尝试使用WordPress的人有所帮助，那我将非常高兴。由于我仍然是个初学者，可能有错误或更好的方法，请随时指出。