事先考虑缩放问题，充分利用标准的Wordpress解决方案，亲手制作WP主题，照顾版式设计师的便利，专注于移动性-更新公司的博客，以便读者，编辑和管理人员喜欢它。 我们做到了。
Promopult的博客已经9岁了。 在此期间，他经历了几次转型。 我们博客的技术专家Sergey Glazov以及Promopult系统中的其他重要内容，都在讨论后者。
不再讨论，因为它已经成为一种规范：公司博客，个人，个人（是的，无论是什么）的一种快速简单的标准。 您可以争论，但事实仍然存在。
我想谈谈我在组织代码，使用WordPress博客及其支持方面遇到的问题。 这个故事是关于过程的，因为当前状态是该过程的最后一点，并且与组织方法中的所有过去迭代相比，当前状态似乎是最成功的。
（我）开始时发生了什么-2016年
开发人员从头开始创建并仔细思考所有内容的情况很少见。 事实证明， 通常 （ 甚至是很久以前，有单独的历史记录 ）已经有一个项目需要得到支持。 重新设计，编辑，大量传统知识和要求。 在现有一切条件下，有必要以某种方式快速导航并解决问题。
我在2016年接受了该博客，当时该博客已有悠久的历史，但并非一切都像我想要的那样美丽。
- 具有九年历史的旧博客设计。
- 缺少任何形式的手机/平板电脑版本。
- 600多个帖子。
- 内容及其组织的结构性问题：20多个类别和9多个数百个标签 （现在更多了，但我们已经停止了）。
- 这些计划已经进行了品牌重塑并转移到新的领域。 这也适用于博客。
- 使用代码时的一连串动作。
- 在没有版本控制（.git）的情况下工作。
首要任务：动员和设计
主要任务是增加对博客现有主题的适应性：使移动用户能够阅读文章并充分使用该网站-他们越来越多地谈论和撰写有关Mobile First的文章 ，而统计数据表明他们是从移动阅读博客的。
与这些作品同时，绘制了新的设计。
作为开发人员，我与设计师紧密合作，在讨论中没有不必要的调解员链，因此沟通过程更快，更生动。 当然，这是显而易见的事实，但是由于某些原因，它在许多过程中都被忽略了。 事实证明，设计师所做的事情与现实截然不同。 说话，讨论所有要点。 过程中的每个参与者都对做好事和冷静感到感兴趣。 但是，并非所有人都知道该过程是一个相互联系的链条，如果单个表演者错过或没有在其工作现场做某件事，那么下一个过程中的人们将很困难。
在移动版本的工作过程中，我看到了组织开发过程的利弊。 我想加快并简化一切。
就像我们在博客上处理代码一样
博客的DEV版本带有单独的测试数据库。 使用文件的操作是在远程服务器上进行的，而测试是在外部环境无法访问的单独地址进行的。 下班后，测试和某种意义单元的诞生-通过向管理员发出呼吁，将其推广到了战斗博客。 他所做的是一个单独的魔术。
对于每年都会更改一次的博客来说，这是一个很棒的过程。 但是对于新版本及其需求，这样的过程将是一个很大的痛苦。
正如他们所说，我想得到的是“在理想的世界中”
所有代码都位于其中。 git存储库。 博客的实战版本是该存储库的master版本。 使用代码的所有工作都是通过提交到dev分支或与各个大型任务相关联的其他分支进行的。
任务完成后，将通过一组编辑创建请求请求（PR）和/或合并请求（MR）。 MR和PR中的含义相同，但是在不同的服务中-名称不同。 我们有GitLab ，所以有合并请求。
创建MR时，可以使用名称为-git--test.dev.blog.promopult.ru形式的临时地址，该地址只能由IP访问，以便在测试环境中进行实时验证。
创建的MR中的代码将自动检查和检查（代码linter，我会根据预定义的规则检查语法），并在手动模式下（团队中的力量垂直者，timlid用海军凸面细心的眼睛仔细看一下它）。 通过审核后-从.git存储库的浏览器界面中，单击“合并”按钮，并且经过一段短暂的明显时间后，所有更改都会显示在战斗博客的广播中。
重新设计，第一种方法
博客重新设计工作计划：
- 静态原型的布局，用于所有页面的设计布局；
- 将（“拉伸”）布局转换为WordPress主题。
布局-一个单独的工作阶段。 为了方便使用样式（CSS），标记和JS，在项目中使用了一组插件和模块，这些插件和模块是通过SPT （启动项目模板）构建器中描述的Gulp任务组装而成的。
在静态博客主题的收集器中使用的关键字是：HTML，CSS，JS，Babel，Gulp，PostCSS，SCSS，Nunjucks。
布局完成后，结构如下（ 仅指示第一级目录 ）：
├──设计＃设计，布局及所有
├──app /＃项目来源：单独的模块
├──dist /＃项目的汇编版本（html文件）和所有静态变量
├──gulpfile.js /＃配置Gulp.js
└──package.json＃收集器配置文件：软件包，脚本
页面上每个单独的视觉语义元素，例如明信片（ /components/article_card/ ），都是一个文件夹，其中：
-标记文件（ article_card.html ），
-样式文件（ article_card.scss ），
-JS文件（ article_card.js ）。
每个页面都是从这样的独立组件块组装而成的。 块易于操作，并且任何更改都不会影响相邻的元素。
在输出中，收集器创建了dist文件夹，其中包含现成的HTML文件页面，以供在编辑和协调阶段在浏览器中直观查看，以及一个样式文件，所有主题和两个JS文件：一个文件（ app.js ）描述了逻辑和行为网站，第二个网站（ vendor.js ）包含该网站使用的所有库（jQuery，fotorama，magnific-popup等）。
接下来，您需要将所有这些变成一个WordPress主题并考虑文件结构。 这样您就可以方便地使用静态布局，并在其旁边放置一个WP主题。
设计师准备的布局清单。 它们与WordPress博客主题文件相同：
- 主页（
home.php文件）。 single.php帖子/帖子页面（ single.php ）。- 单个文本页面（
page.php ）的视图。 - 时事通讯订阅页面（subscription.php）。
- 错误404（
404.php ）。 - 单独的标记页（
tag.php ）。 - 单独的类别页面（
category.php ）。 - 搜索和搜索结果（
search.php ）。
采用这种方法并将主题的静态版本和WordPress版本分开的工作流程如下：如果您需要在视觉部分修复某些内容-更改将在静态版本中进行，并且在测试之后转移到主题中。 如果需要在某些非可视部分进行编辑，则仅更改WP主题文件。
博客主题文件夹为bsp 。 它位于包含博客本身主题的文件夹中的路径中 ：
├──wp-content /＃自定义WordPress网站文件
│├──主题/＃网站主题
││├──app /＃静态主题的来源
│││├──gulpfile.js /＃组装的Gulp任务
││├──dist /＃建立一个静态主题
│││├──资产/＃资源：JS，CSS和图形
││├──bsp /＃WP-PromoPult博客主题
│││├──资产/＃资源：JS，CSS和图形，从`/ dist /`复制
│││├──home.php＃博客的主页以及位于主题根目录的其他文件
WordPress主题的位置很明显，并且由WordPress本身的文件结构预先确定。
主题目录中没有其他主题-所有标准都已删除。 以这种方式提高生产率存在一个神话，但是我们没有注意到这一点。 对于代码中的命令，可以完成更多操作。 无需存储不使用的东西，并且绝对不会使用。
在.git中，还使用了所有WP插件。 在我们的网站上，这些是Google XML网站地图，用于Yandex Turbo的RSS，RusToLat和WP-PostViews。
博客页面和源文件的静态编译原型已移至博客主题目录：为了方便地与模板的逻辑部分以及与负责页面元素外观和行为的所有内容进行交互。
项目程序集的静态版本-带有源以及所有在第一次尝试组织结构时的依赖关系-放置在主题目录中。
也就是说，在主要bsp主题旁边，添加了/app目录，其中包含了主题布局和gulp-collector的源代码。 但是在此版本中有一个困难时刻：静态文件是在单独的目录中生成的，并且为了使更改能够在WP主题中进行，有必要将静态样式文件和脚本复制到主题内的assets文件夹中。
第二种方法：结构的新版本
在最初的几周中，这是由一个简单的控制台脚本决定的，该脚本将收集的文件从静态主题复制到WP主题。 过度的操作会导致错误。 因此，选择仅是纠正结构。
我们有三个重要的目录（从根开始一直）：
- WP主题：
/wp-content/themes/bsp - 静态主题的来源：
/app - 收集的静态主题：
/dist
里面有带有样式文件，图形和JS的assets
您需要安排所有内容，以便将静态样式和脚本文件收集在所需的文件夹（ /wp-content/themes/bsp/assets ）中。
该结构的新版本如下：
├──gulpfile.js /＃组装的Gulp任务
├──wp-content /＃自定义WordPress网站文件
│├──插件/＃WP插件
│├──主题/＃网站主题
││├──bsp /＃PromoPult博客主题
│││├──app /＃静态主题的来源
│││├──资产/＃资源：JS，CSS和图形（自动生成）
│││├──home.php＃博客的主页以及位于主题根目录的其他文件
├──wp-admin /＃用于管理面板的WP文件
├──wp-includes /系统的WP文件
整个项目的根源是gulp任务-从根开始执行。 gulp-task配置描述了从wp-content/themes/bsp/app目录收集静态文件到wp-content/themes/bsp/assets静态文件的结构，无需任何其他操作，例如复制等。
WP主题文件保持不变，并且工作根据旧方案进行：静态编辑→传输到WP文件。 CSS和JS静态变量会立即在主题文件夹中生成，并且一切正常。
所有这些都是关于工作过程的。 现在介绍博客的排列方式。
PromoPult博客：工作原理
博客的主要力量是团队。 编辑，作者，布局设计师。
最大的任务是在管理区域中方便地处理博客内容。 考虑到我们博客的主题是专门针对内容任务和编辑请求的，因此对管理面板进行了相应的修改。
发布前的清单
任何工作对控制都很重要。 文章的布局是一个标准的，正式的过程，可以很容易地以检查表的形式呈现。
伙计们从EmailSoldiers看到了这个主意。 我们决定在家中使用它。
如果未选中任何项目，系统将在发布前警告您。
通过单击链接，列表项中带下划线的链接-突出显示特定项。
清单的编译顺序与管理面板中的其他帖子设置相同。
博客文章设置
与上述出版物清单紧密交织。
在开发主题时，我尝试不使用插件，而是为主题的任务提供一个简单的解决方案。 重点：
- SEO元标记的描述。
- 使用社交网络共享材料并形成精美文章卡的OpenGraph标签的说明。
- 便利的工作，带有张贴的封面图片。 需要一张图片-将其添加到发布图块中的明信片上，该图块显示在主页上以及标题或标签页面上。
- 其他主题设置：帖子可以带或不带封面，标题中带有封面的简短公告文本，也用于摘要邮件列表中文章的描述。
帖子设置部分是通过WordPress中的元框和自定义字段实现的。
通过元框，还添加了发布清单。
在模板中，使用字段很简单：如果字段不为空且未填充，我们将获取值并显示出来。 例如，这是显示对该帖子的屏蔽反应的方式：
<?php if (get_post_meta($post->ID, 'postreaction', true)) { ?> <div class="article_reaction"> <div class="label-reaction"><span><?php echo get_post_meta($post->ID, 'postreaction', true); ?></span></div> </div><!-- /.article_reaction --> <?php } ?>
明信片上反应输出的示例：
好东西
有一些美好的小事情，也许没人会看到。 但是，如果有人注意到-好。
例如，卡片中的帖子的发布日期以及我们的西里尔字母中的单独帖子的发布日期，并且知道如何鞠躬。 由于某种原因，这不在WordPress框中。 如果发布日期为当年，则不与我们一起显示年份；如果年份与当前年份不同，则日期与发布年一起显示。
发表评论计数器。 他们争论了很长时间，“ 0条评论”或“无评论”非常令人困惑。 解决方案非常简单：如果评论少于一个，则根本不显示评论计数器。
总的来说，我们正在单独开发评论系统，并希望在单独的大型帖子中进行讨论。 我们通过社交网络通过简单的授权创建了一个简单便捷的评论系统。
自己喜欢：评论或共享社交网络中的链接对内容的消耗率来说是一个漫长的问题，但是请单击“喜欢”并清楚表明文章很酷-简单，快捷。 我们简单点赞，然后将柜台放在明信片上。 和喜欢到达很快。 并且由于它们位于文章的底部，因此也表明已阅读文本。
他们为博客写了一个黑暗的主题 -现在它很流行。 考虑到模块化结构（实际上，该站点是一组以某种方式相互组合的块）和样式的组织，因此很快就可以完成。
关于有趣的技术
主题中的标记代码 ，CSS和JS的最小化。 CSS和JS是通过statics收集器中的WP_HTML_Compression任务压缩的，但是标记的WP_HTML_Compression是通过WordPress钩子WP_HTML_Compression 。
在标记的注释中，我们添加了一个促销代码，用于那些对内部布局如何感兴趣并首先查看源代码的人：
CSS和JS缓存。 为了缓存样式和脚本文件，但是始终保持相关性，如果要重做一些事情，则使用filemtime（）。 许多情况下使用?<?php echo time(); ?> ?<?php echo time(); ?> 。 但是此选项下载文件并在每次调用时发出请求。
最好使用这样的技巧：
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/assets/styles/style.css?t=<?php echo filemtime(get_theme_file_path().'/assets/styles/style.css'); ?>" />
在这种情况下，如果文件已更改，将下载它们，并将文件的修改日期添加到request参数中。
我们使用什么插件
尽管在某些情况下有可能并希望您做出决定，但我们仍然使用插件。 我们的清单如下：
针对公司博客工作人员的总结提示
- 我建议您在项目开始之初立即考虑扩展。
- 确保在工作中使用
.git 。 当然，对于2019年来说，这是一个奇怪的建议，但是这个建议可以将某人从白发中拯救出来，并在出现问题时予以谴责。 - 最好将WordPress主题的开发和工作分为两个阶段：首先，组成静态对象，然后完成“拉出” WordPress主题之类的操作。
- 如果有机会-时间，团队和对您为什么需要所有这些的理解-自己动手，无需使用现成的选项。 赢得胜利并了解一切。 您不会产生拐杖。
- 如果您的博客是基于它的，请使用标准的WordPress挂钩和功能。 定制和制定便捷的解决方案非常容易。
- 方便用户和编辑者。
- 不要忘记社交网络和微布局。
- 不要忘记移动版本。
- 不要忘记对插件和系统进行定期更新。
- 仅选择经过验证的插件。
博客上的工作仍在继续-与我们同在。