{"id":4839,"date":"2018-01-16T13:00:02","date_gmt":"2018-01-16T04:00:02","guid":{"rendered":"https:\/\/tadtadya.com\/?p=4806"},"modified":"2021-01-25T13:55:02","modified_gmt":"2021-01-25T04:55:02","slug":"atom-build-a-wordpress-development-environment","status":"publish","type":"post","link":"https:\/\/tadtadya.com\/en\/atom-build-a-wordpress-development-environment\/","title":{"rendered":"Atom, Build WordPress development environment"},"content":{"rendered":"\n<p>This is how to build a WordPress development environment with the text editor Atom.<\/p>\n\n\n\n<p>No need to do anything complicated. All you have to do is install the necessary packages and configure them.<\/p>\n\n\n\n<!--more-->\n\n\n\n<div class=\"wp-block-origin-block-msg-box\"><div class=\"msgbox msgbox-notice v1\"><i class=\"fas fa-exclamation-triangle icon\"><\/i><div class=\"msg\">\n<p>This is written by a Japanese who can't speak English with the help of translation application. Sorry if it's not good.<\/p>\n<\/div><\/div><\/div>\n\n\n<div id=\"toc\" class=\"idx-lst\">\n\t<input type=\"checkbox\" class=\"chk\" id=\"idx-lst-chk\" name=\"btn\" \/>\n\t<label class=\"idx-lst-hd\" for=\"idx-lst-chk\"><i class=\"fa-solid fa-check-double\"><\/i>Contents<\/label>\n\t<div class=\"idx-lst-bd\">\n\t\t<ul class=\"idx-lst-ul\">\n\t\t\t\t\t\t\t<li class=\"idx-lst-li idt0\">\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa-regular fa-hand-point-right ico\"><\/i>\n\t\t\t\t\t\t\t\t\t\t<a href=\"#index-list-1\" title=\"Set up a WordPress development environment for the Atom editor.\">Set up a WordPress development environment for the Atom editor.<\/a>\n\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"idx-lst-li idt0\">\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa-regular fa-hand-point-right ico\"><\/i>\n\t\t\t\t\t\t\t\t\t\t<a href=\"#index-list-2\" title=\"Change Atom settings (indent settings)\">Change Atom settings (indent settings)<\/a>\n\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"idx-lst-li idt0\">\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa-regular fa-hand-point-right ico\"><\/i>\n\t\t\t\t\t\t\t\t\t\t<a href=\"#index-list-3\" title=\"Configure linter-phpcs\">Configure linter-phpcs<\/a>\n\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"idx-lst-li idt0\">\n\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa-regular fa-hand-point-right ico\"><\/i>\n\t\t\t\t\t\t\t\t\t\t<a href=\"#index-list-4\" title=\"Summary\">Summary<\/a>\n\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t<\/div>\n<\/div>\n\n\n\n\n<h2 class=\"is-style-h2df\" id=\"index-list-1\">Set up a WordPress development environment for the Atom editor.<\/h2>\n\n\n\n<p>WordPress is the best CMS available today.<\/p>\n\n\n\n<div class=\"wp-block-origin-block-em-box em-group em-group-word\"><details><summary>CMS (Contents Management System)<\/summary>\n<p>A framework that provides tools for building a website without programming.<\/p>\n\n\n\n<p>In the Web, what is displayed on a page is called \"content\".<\/p>\n\n\n\n<p>Create a website by dragging and dropping content into place.<\/p>\n\n\n\n<p>WordPress is famous.<\/p>\n<\/details><\/div>\n\n\n\n<p>As of 4\/2018, there is no superior CMS that I would love to migrate from WordPress. I think WordPress will still continue to grow.<\/p>\n\n\n\n<p>I will show you how to use the Atom editor to work with that WordPress development.<\/p>\n\n\n\n<p>First, let's install the Atom package.<\/p>\n\n\n\n<div class=\"wp-block-origin-block-a-link-ext alk-ex\"><a href=\"https:\/\/tadtadya.com\/en\/atom-introducing-packages-recommended-for-wordpress-development\/\" title=\"Atom, Recommended packages for WprdPress development\"><strong>Atom, Recommended packages for WprdPress development<\/strong> <i class=\"fas fa-angle-double-right\"><\/i><\/a><\/div>\n\n\n\n<h2 class=\"is-style-h2df\" id=\"index-list-2\">Change Atom settings (indent settings)<\/h2>\n\n\n\n<p>Since indentation is a tab in the WordPress coding conventions, change the indentation setting of atom.<\/p>\n\n\n\n<p>Open the settings screen from the menu.<\/p>\n\n\n\n<div class=\"wp-block-origin-block-em-box em-group em-group-default\">\n<p>File -&gt; Settings -&gt; Editor<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/i0.wp.com\/tadtadya.com\/wp-content\/uploads\/2017\/12\/atom-wordpress-env-01.png?ssl=1\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/tadtadya.com\/wp-content\/uploads\/2017\/12\/atom-wordpress-env-01-700x426.png?resize=700%2C426&#038;ssl=1\" alt=\"Atom-WordPress\u74b0\u5883\u8a2d\u5b9a\u30ad\u30e3\u30d7\u30c1\u30e3-01\" class=\"wp-image-4819\" data-recalc-dims=\"1\"\/><\/a><\/figure><\/div>\n\n\n\n<p>Change the tab type, which is a special expression in Atom, but in WordPress we use \"<strong><span class=\"marker-blue\">hard<\/span><\/strong>\".<\/p>\n\n\n\n<figure class=\"wp-block-table aligncenter\"><table><tbody><tr><td>tab<\/td><td>hard<\/td><\/tr><tr><td>space<\/td><td>soft<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>By the way, the indent for PSR is four spaces, and for PSR it should be \"soft\".<\/p>\n\n\n\n<div class=\"wp-block-origin-block-em-box em-group em-group-word\"><details><summary>PSR (PHP Standards Recommendations)\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<\/summary>\n<p><a href=\"https:\/\/www.php-fig.org\/psr\/\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"https:\/\/www.php-fig.org\/psr\/\">https:\/\/www.php-fig.org\/psr\/<\/a><\/p>\n\n\n\n<p>A standardization effort for PHP coding, developed by PHP-FIG.<\/p>\n\n\n\n<p><strong><span class=\"marker-green\">PHP-FIG (PHP Framework Interop Group)<\/span><\/strong><\/p>\n\n\n\n<p><a href=\"http:\/\/www.php-fig.org\/\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"php-fig.org\">http:\/\/www.php-fig.org\/<\/a><\/p>\n\n\n\n<p>PHP Framework Interoperability Group, an organization where PHP projects get together to discuss and coordinate the compatibility of each other's products.<\/p>\n\n\n\n<p>Many famous projects are participating.<\/p>\n<\/details><\/div>\n\n\n\n<h2 class=\"is-style-h2df\" id=\"index-list-3\">Configure linter-phpcs<\/h2>\n\n\n\n<p>Open the linter-phpcs configuration window.<\/p>\n\n\n\n<div class=\"wp-block-origin-block-em-box em-group em-group-default\">\n<p>File -&gt; Settings -&gt; Packages<\/p>\n<\/div>\n\n\n\n<p>Click Settings for linter-phpcs.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/i0.wp.com\/tadtadya.com\/wp-content\/uploads\/2017\/12\/atom-wordpress-env-02.png?ssl=1\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/tadtadya.com\/wp-content\/uploads\/2017\/12\/atom-wordpress-env-02-700x426.png?resize=700%2C426&#038;ssl=1\" alt=\"Atom-WordPress\u74b0\u5883\u8a2d\u5b9a\u30ad\u30e3\u30d7\u30c1\u30e3-02\" class=\"wp-image-4820\" data-recalc-dims=\"1\"\/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/i0.wp.com\/tadtadya.com\/wp-content\/uploads\/2017\/12\/atom-wordpress-env-03.png?ssl=1\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/tadtadya.com\/wp-content\/uploads\/2017\/12\/atom-wordpress-env-03-700x426.png?resize=700%2C426&#038;ssl=1\" alt=\"Atom-WordPress\u74b0\u5883\u8a2d\u5b9a\u30ad\u30e3\u30d7\u30c1\u30e3-03\" class=\"wp-image-4821\" data-recalc-dims=\"1\"\/><\/a><\/figure><\/div>\n\n\n\n<figure class=\"wp-block-table aligncenter\"><table><tbody><tr><td>Code Standard Or Config File<\/td><td>WordPress-Core<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>That's it for the settings. Finally, let's check the operation.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/i0.wp.com\/tadtadya.com\/wp-content\/uploads\/2017\/12\/atom-wordpress-env-04.png?ssl=1\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/tadtadya.com\/wp-content\/uploads\/2017\/12\/atom-wordpress-env-04-700x426.png?resize=700%2C426&#038;ssl=1\" alt=\"Atom-WordPress\u74b0\u5883\u8a2d\u5b9a\u30ad\u30e3\u30d7\u30c1\u30e3-04\" class=\"wp-image-4822\" data-recalc-dims=\"1\"\/><\/a><\/figure><\/div>\n\n\n\n<h3 class=\"is-style-h3df\">Explanation<\/h3>\n\n\n\n<p>In line 6, change the indent of the php code to a space, and you will see the capture.<\/p>\n\n\n\n<p>Areas that do not conform to WordPress coding conventions are marked in red. Then, the error content is displayed in the linter window.<\/p>\n\n\n\n<p>Wouldn't it be nice to get the results of the check the moment you write the code?<\/p>\n\n\n\n<p>The red mark will keep appearing until you fix it. If you code in such a way that the red marks disappear, you will naturally follow the coding conventions of WordPress.<\/p>\n\n\n\n<p>You can focus on coding without worrying about conventions.<\/p>\n\n\n\n<p>Also, when creating in an object-oriented manner, WordPress has its own class and class file naming conventions.<\/p>\n\n\n\n<p>This package also recognizes these as errors.<\/p>\n\n\n\n<h2 class=\"is-style-h2df\" id=\"index-list-4\">Summary<\/h2>\n\n\n\n<p>This time, I created a WordPress development environment using only the minimum required packages.<\/p>\n\n\n\n<p>There are other packages that are useful and can create a more efficient environment.<\/p>\n\n\n\n<p>However, I am using this environment for WordPress development, and I think it is sufficient for now.<\/p>\n\n<!-- WP QUADS Content Ad Plugin v. 2.0.65.1 -->\n<div class=\"quads-location quads-ad2\" id=\"quads-ad2\" style=\"float:none;margin:0px;\">\n<ul class=\"quads-location-ul\">\r\n<li class=\"quads-location-li li-1\">\r\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\r\n<ins class=\"adsbygoogle\"\r\n     style=\"display:block\"\r\n     data-ad-client=\"ca-pub-4926008942376207\"\r\n     data-ad-slot=\"6550760310\"\r\n     data-ad-format=\"auto\"\r\n     data-full-width-responsive=\"true\"><\/ins>\r\n<script>\r\n     (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>\r\n<\/li>\r\n<li class=\"quads-location-li li-2\">\r\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\r\n<ins class=\"adsbygoogle\"\r\n     style=\"display:block\"\r\n     data-ad-client=\"ca-pub-4926008942376207\"\r\n     data-ad-slot=\"6550760310\"\r\n     data-ad-format=\"auto\"\r\n     data-full-width-responsive=\"true\"><\/ins>\r\n<script>\r\n     (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>\r\n<\/li>\r\n<\/ul>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>This is how to build a WordPress development environment with the text editor Atom. No need to do anything complicated. All you have to do is install the necessary packages and configure them.<\/p>\n","protected":false},"author":1,"featured_media":12495,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"jetpack_publicize_message":"Atom: Build WordPress development environment\r\n\r\n#Atom_Build_WordPress_development_environment","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_options":[]},"categories":[9,42,43,273,274],"tags":[38,275],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/tadtadya.com\/en\/wp-content\/uploads\/sites\/2\/2018\/10\/atom-wordpress.png?fit=1280%2C671&ssl=1","jetpack_sharing_enabled":false,"jetpack_shortlink":"https:\/\/wp.me\/p8Qw77-1g3","jetpack_likes_enabled":false,"_links":{"self":[{"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/posts\/4839"}],"collection":[{"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/comments?post=4839"}],"version-history":[{"count":0,"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/posts\/4839\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/media\/12495"}],"wp:attachment":[{"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/media?parent=4839"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/categories?post=4839"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/tags?post=4839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}