{"id":363734,"date":"2024-05-21T02:02:20","date_gmt":"2024-05-21T02:02:20","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=363734"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2024-05-21T02:02:20","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=363734","title":{"rendered":"<span>\u041a\u0430\u043a \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u0432 2024 \u0433\u043e\u0434\u0443 \u043c\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0441\u0430\u0439\u0442\u044b \u0434\u043b\u044f \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 WordPress?<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f WordPress \u2014 \u043e\u0434\u0438\u043d \u0438\u0437 \u043b\u0443\u0447\u0448\u0438\u0445 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0440\u044b\u043d\u043a\u0435. \u041a\u0430\u043a \u0438 \u043c\u043d\u043e\u0433\u0438\u0435 IT-\u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438, \u043c\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u043b\u0438 \u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u0430\u0439\u0442\u043e\u0432 \u043d\u0430 \u043a\u043e\u0440\u043e\u0431\u043e\u0447\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u0445 \u0441 \u043d\u0438\u0437\u043a\u0438\u043c \u043f\u043e\u0440\u043e\u0433\u043e\u043c \u0432\u0445\u043e\u0434\u0430. \u0420\u0430\u0441\u0448\u0438\u0440\u0438\u0432 \u044d\u043a\u0441\u043f\u0435\u0440\u0442\u0438\u0437\u0443 \u0438 \u0441\u043e\u0431\u0440\u0430\u0432 \u043c\u043e\u0449\u043d\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443, \u043c\u044b \u043d\u0430\u0443\u0447\u0438\u043b\u0438\u0441\u044c \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u00ab\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c\u00bb WordPress \u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u0433\u0440\u0430\u043c\u043e\u0442\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0435\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u043b\u0435\u0433\u0447\u0438\u0442\u044c \u0436\u0438\u0437\u043d\u044c \u0441\u0435\u0431\u0435 \u0438 \u043d\u0430\u0448\u0438\u043c \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u043c. \u041a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u0430\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u0430\u043c, \u0433\u0434\u0435 \u0435\u0441\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0438 \u043c\u043e\u0449\u043d\u044b\u0439 \u043c\u0435\u043d\u0435\u0434\u0436\u043c\u0435\u043d\u0442, \u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043b\u044e\u0431\u044b\u043c\u0438.<\/p>\n<h3>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0435\u043c, \u043a\u0430\u043a \u0441\u0442\u0440\u043e\u0438\u043c \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u043d\u0430\u0448\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 WordPress<\/h3>\n<p>\u041b\u044e\u0431\u0430\u044f CMS \u0434\u0430\u0435\u0442 \u043d\u0430\u043c \u0430\u0434\u043c\u0438\u043d\u043a\u0443 \u0438 \u044f\u0434\u0440\u043e, \u0430 \u0438\u0437 \u044f\u0434\u0440\u0430 \u0432\u044b\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u0431\u043e\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. WordPress \u0434\u0430\u0435\u0442 \u043d\u0430\u043c \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a \u043d\u0430 PHP (\u043d\u043e\u0432\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f) \u0441 \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0439 \u0430\u0434\u043c\u0438\u043d\u043a\u043e\u0439 \u0438 \u043d\u0435\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0439, \u0430 \u0432\u0441\u044e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043c\u044b \u043f\u0438\u0448\u0435\u043c \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e.<\/p>\n<p>\u041c\u044b \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u043c \u043a \u044d\u0442\u043e\u043c\u0443 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e: \u043f\u0440\u043e\u0434\u0443\u043c\u044b\u0432\u0430\u0435\u043c \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u043e\u0441\u043e\u0431\u044b\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430:<\/p>\n<ul>\n<li>\n<p>\u041f\u0435\u0440\u0432\u043e\u0435 \u2014 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u0431\u043b\u043e\u043a\u043e\u0432 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0423 WordPress \u0435\u0441\u0442\u044c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 Gutenberg (\u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0438 \u043e\u0431 \u044d\u0442\u043e\u043c\u00a0<a href=\"https:\/\/vc.ru\/u\/2305806-we-wizards\/884130-kak-my-sozdaem-admin-paneli-o-kotoryh-mechtayut-vse-vladelcy-saytov\" rel=\"noopener noreferrer nofollow\">\u0432 \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u0441\u0442\u0430\u0442\u0435\u0439<\/a>), \u0438 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0441\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0438\u0437 \u0431\u043b\u043e\u043a\u043e\u0432, \u043a\u0430\u043a \u0432 Tilda. \u042d\u0442\u043e\u0442 \u0436\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u043c \u0438 \u0432 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b: \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0431\u043b\u043e\u043a\u0438, shared-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0439\u0434\u0436-\u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442\u044b, \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0431\u0438\u0437\u043d\u0435\u0441-\u0444\u0438\u0447\u0438 \u0438 \u0442 \u0434.<\/p>\n<\/li>\n<\/ul>\n<ul>\n<li>\n<p>\u0412\u0442\u043e\u0440\u043e\u0435 \u2014 \u043c\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c JQL, \u043f\u0438\u0448\u0435\u043c \u0432\u0441\u0435 \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c JS \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u043a \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044e \u043b\u043e\u0433\u0438\u043a\u0438. \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u043c\u043e\u0436\u0435\u043c \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u043f\u0440\u0438\u043a\u0440\u0443\u0442\u0438\u0442\u044c Vue \u0438\u043b\u0438 React (\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430 WP \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438). \u041a \u0442\u043e\u043c\u0443 \u0436\u0435 \u0432 WP \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d REST API, \u0438 \u0435\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u043d\u0435\u0442 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0438\u043b\u0438 \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442\u043e\u0432, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043b\u0435\u0433\u043a\u043e \u0438\u0445 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c.<\/p>\n<\/li>\n<\/ul>\n<h3>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0430\u043f\u043e\u043a \u0438 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u043c\u044b WordPress<\/h3>\n<p>\u0424\u0430\u0439\u043b\u044b \u0432 \u043a\u043e\u0440\u043d\u0435 \u0442\u0435\u043c\u044b:<\/p>\n<ul>\n<li>\n<p><code>style.css<\/code> &#8212; \u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b, \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0442\u0435\u043c\u0435<\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0442\u0430\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u0430\u043a:<\/p>\n<ul>\n<li>\n<p>\u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0442\u0435\u043c\u044b<\/p>\n<\/li>\n<li>\n<p>\u0432\u0435\u0440\u0441\u0438\u044f \u0442\u0435\u043c\u044b<\/p>\n<\/li>\n<li>\n<p>\u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f WordPress<\/p>\n<\/li>\n<li>\n<p>\u0432\u0435\u0440\u0441\u0438\u044f PHP<\/p>\n<\/li>\n<\/ul>\n<p><a href=\"https:\/\/wp-kama.ru\/handbook\/theme\/style-css\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0442\u0443\u0442<\/a><\/p>\n<\/li>\n<li>\n<p><code>theme.json<\/code> &#8212; \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0442\u0435\u043c\u044b (\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0438, \u0446\u0432\u0435\u0442\u043e\u0432\u0430\u044f \u043f\u0430\u043b\u0438\u0442\u0440\u0430)<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1cc\/5f0\/7a5\/1cc5f07a5bba639203fdf133732057f8.gif\" alt=\"\u0414\" title=\"\u0414\" width=\"1254\" height=\"946\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1cc\/5f0\/7a5\/1cc5f07a5bba639203fdf133732057f8.gif\"\/><\/p>\n<div><figcaption>\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a <code>theme.json<\/code><\/p>\n<pre><code class=\"json\">{     \"version\": 1,     \"settings\": {         \"typography\": {             \"customFontSize\": false,             \"lineHeight\": true,             \"fontSizes\": [                 {                     \"slug\": \"h1\",                     \"size\": \"6rem\",                     \"name\": \"H1\"                 },                 {                     \"slug\": \"h2\",                     \"size\": \"2.88rem\",                     \"name\": \"H2\"                 },                 {                     \"slug\": \"h3\",                     \"size\": \"1.5rem\",                     \"name\": \"H3\"                 },                 {                     \"slug\": \"text_46\",                     \"size\": \"2.88rem\",                     \"name\": \"Text 46\"                 },                 {                     \"slug\": \"text_24\",                     \"size\": \"1.5rem\",                     \"name\": \"Text 24\"                 },                 {                     \"slug\": \"text_16\",                     \"size\": \"1rem\",                     \"name\": \"Text 16\"                 }             ]         },         \"spacing\": {             \"spacingSizes\": [                 {                     \"size\": \"clamp(1.5rem, 5vw, 2rem)\",                     \"slug\": \"30\",                     \"name\": \"1\"                 },                 {                     \"size\": \"clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem)\",                     \"slug\": \"40\",                     \"name\": \"2\"                 },                 {                     \"size\": \"clamp(2.5rem, 8vw, 6.5rem)\",                     \"slug\": \"50\",                     \"name\": \"3\"                 }             ],             \"blockGap\": true,             \"customPadding\": true,             \"customMargin\": true,             \"units\": [                 \"px\",                 \"rem\",                 \"%\"             ]         },         \"color\": {             \"palette\": [                 {                     \"slug\": \"black\",                     \"color\": \"#000000\",                     \"name\": \"Black\"                 },                 {                     \"slug\": \"pink\",                     \"color\": \"#F2CFCE\",                     \"name\": \"Pink\"                 },                 {                     \"slug\": \"white\",                     \"color\": \"#ffffff\",                     \"name\": \"White\"                 },                 {                     \"slug\": \"grey\",                     \"color\": \"#A5A5A5\",                     \"name\": \"Grey\"                 }             ]         }     } } <\/code><\/pre>\n<\/li>\n<li>\n<p><code>functions.php<\/code> &#8212; \u0412\u0445\u043e\u0434\u043d\u043e\u0439 \u0444\u0430\u0439\u043b \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 php<\/p>\n<p>\u0422\u0443\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 load \u0444\u0430\u0439\u043b\u0430 \u0438\u0437 \u043f\u0430\u043f\u043a\u0438 includes (\u0433\u0434\u0435 \u043b\u0435\u0436\u0430\u0442 \u0432\u0441\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 php \u0441\u043a\u0440\u0438\u043f\u0442\u044b), \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f load \u0444\u0430\u0439\u043b\u0430 \u0438\u0437 \u043f\u0430\u043f\u043a\u0438 blocks \u0438 components<\/p>\n<\/li>\n<li>\n<p><code>header.php<\/code> &#8212; \u0428\u0430\u0431\u043b\u043e\u043d \u0448\u0430\u043f\u043a\u0438 \u0441\u0430\u0439\u0442\u0430<\/p>\n<p>\u0422\u0443\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>wp_head()<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u043c\u0435\u0442\u0430-\u0442\u0435\u0433\u0438<\/p>\n<\/li>\n<li>\n<p><code>footer.php<\/code> &#8212; \u0428\u0430\u0431\u043b\u043e\u043d \u043f\u043e\u0434\u0432\u0430\u043b\u0430 \u0441\u0430\u0439\u0442\u0430<\/p>\n<p>\u0422\u0443\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>wp_footer()<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442 js-\u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0442\u0435\u043c\u044b \u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432<\/p>\n<\/li>\n<li>\n<p><code>page.php<\/code> &#8212; \u0414\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/p>\n<p>\u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0442\u0443\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 <code>header.php<\/code> \u0438 <code>footer.php<\/code> c \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0439 <code>get_header()<\/code> \u0438 <code>get_footer()<\/code> \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n<pre><code class=\"php\">get_header();  if ( have_posts() ) {     while ( have_posts() ) {         the_post();         the_content();     } }  get_footer();<\/code><\/pre>\n<\/li>\n<li>\n<p><code>package.json<\/code> &#8212; \u0417\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/p>\n<\/li>\n<li>\n<p><code>index.php<\/code> &#8212; \u041f\u0443\u0441\u0442\u043e\u0439 \u0438\u043d\u0434\u0435\u043a\u0441\u043d\u044b\u0439 \u0444\u0430\u0439\u043b<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0430\u043f\u043a\u0438:<\/p>\n<ul>\n<li>\n<p><code>acf-json<\/code> &#8212; \u041f\u0430\u043f\u043a\u0430 \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u043e\u0432 \u043f\u043e\u043b\u0435\u0439 \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0441 \u043e\u043f\u0446\u0438\u044f\u043c\u0438, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c Advanced Custom Fields. \u042d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0435\u0441\u043b\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0432\u0435\u0434\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435, \u0432\u0441\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u0435\u0439 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0433\u0438\u0442\u0435<\/p>\n<\/li>\n<li>\n<p><code>assets<\/code> &#8212; \u0422\u0443\u0442 \u043b\u0435\u0436\u0430\u0442 \u0432\u0441\u0435 \u0441\u0442\u0438\u043b\u0438, \u0441\u043a\u0440\u0438\u043f\u0442\u044b, \u0448\u0440\u0438\u0444\u0442\u044b \u0438 \u043f\u0440\u043e\u0447\u0438\u0435 \u0444\u0430\u0439\u043b\u044b, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0435 \u0437\u0430 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434<\/p>\n<\/li>\n<li>\n<p><code>blocks<\/code> &#8212; \u041a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 gutenberg \u0431\u043b\u043e\u043a\u0438<\/p>\n<\/li>\n<li>\n<p><code>components<\/code> &#8212; \u041f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/p>\n<\/li>\n<li>\n<p><code>includes<\/code> &#8212; \u041f\u0430\u043f\u043a\u0430 \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u0430\u043c\u0438 php<\/p>\n<\/li>\n<li>\n<p><code>page-templates<\/code> &#8212; \u0428\u0430\u0431\u043b\u043e\u043d\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446<\/p>\n<\/li>\n<\/ul>\n<pre><code>Theme_folder \u251c\u2500\u2500 acf-json \u2502   \u251c\u2500\u2500 group_64c25ae72741a.json \u2502   \u2514\u2500\u2500 ... \u251c\u2500\u2500 assets \u2502   \u251c\u2500\u2500 css \u2502   \u251c\u2500\u2500 js \u2502   \u2502   \u251c\u2500\u2500 config \u2502   \u2502   \u251c\u2500\u2500 admin.js \u2502   \u2502   \u251c\u2500\u2500 editor.js \u2502   \u2502   \u2514\u2500\u2500 index.js \u2502   \u2514\u2500\u2500 resource \u251c\u2500\u2500 blocks \u2502   \u251c\u2500\u2500 block1 \u2502   \u2502   \u251c\u2500\u2500 block.json \u2502   \u2502   \u251c\u2500\u2500 functions.php \u2502   \u2502   \u251c\u2500\u2500 template.php \u2502   \u2502   \u251c\u2500\u2500 _index.scss \u2502   \u2502   \u2514\u2500\u2500 _index.js \u2502   \u2514\u2500\u2500 load.php \u251c\u2500\u2500 components \u2502   \u251c\u2500\u2500 component1 \u2502   \u2502   \u251c\u2500\u2500 [component-name].php \u2502   \u2502   \u251c\u2500\u2500 functions.php \u2502   \u2502   \u251c\u2500\u2500 _index.scss \u2502   \u2502   \u2514\u2500\u2500 _index.js \u2502   \u2514\u2500\u2500 load.php \u251c\u2500\u2500 includes \u2502   \u251c\u2500\u2500 [module-name].php \u2502   \u2514\u2500\u2500 load.php \u251c\u2500\u2500 page-templates \u251c\u2500\u2500 footer.php \u251c\u2500\u2500 functions.php \u251c\u2500\u2500 header.php \u251c\u2500\u2500 index.php \u251c\u2500\u2500 package.json \u251c\u2500\u2500 page.php \u251c\u2500\u2500 style.css \u2514\u2500\u2500 theme.json<\/code><\/pre>\n<h4>Gutenberg blocks<\/h4>\n<p>\u0412\u0438\u0434\u0435\u043e \u0441 \u0434\u0435\u043c\u043e<\/p>\n<p><a href=\"https:\/\/www.loom.com\/share\/2c19f771a64f4c69b10484972d5163b5\" rel=\"noopener noreferrer nofollow\">https:\/\/www.loom.com\/share\/2c19f771a64f4c69b10484972d5163b5<\/a><\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u043f\u0430\u043f\u043a\u0435 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0441\u0430\u043c\u0438 \u0431\u043b\u043e\u043a\u0438 \u0432 \u043f\u043e\u0434\u043f\u0430\u043f\u043a\u0430\u0445 \u0438 \u0444\u0430\u0439\u043b load.php, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0432\u0441\u0435\u0445 \u0431\u043b\u043e\u043a\u043e\u0432.<\/p>\n<p>\u0411\u043b\u043e\u043a \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0432 \u0432\u0438\u0434\u0435 \u043f\u0430\u043f\u043a\u0438 \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438:<\/p>\n<ul>\n<li>\n<p><code>block.json<\/code> &#8212; \u0414\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0431\u043b\u043e\u043a\u0430, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a name, title, \u0438 \u0442\u0434<\/p>\n<\/li>\n<li>\n<p><code>template.php<\/code> &#8212; \u0424\u0430\u0439\u043b \u0441 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439 \u0431\u043b\u043e\u043a\u0430<\/p>\n<\/li>\n<li>\n<p><code>functions.php<\/code> &#8212; PHP \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u044d\u0442\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430<\/p>\n<\/li>\n<li>\n<p><code>_index.scss<\/code> &#8212; \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0431\u043b\u043e\u043a\u0430<\/p>\n<\/li>\n<li>\n<p><code>_index.js<\/code> &#8212; \u0421\u043a\u0440\u0438\u043f\u0442\u044b \u0434\u043b\u044f \u0431\u043b\u043e\u043a\u0430<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"json\">{   \"name\" : \"mytheme\/custom-block\",   \"title\" : \"Custom Block\",   \"icon\": \"admin-site\",   \"description\": \"My awesome custom block.\",   \"apiVersion\": 3,   \"textdomain\": \"mytheme\",   \"supports\": {     \"align\" : false,     \"mode\"  : false,     \"jsx\"   : true,     \"anchor\": true   },   \"acf\": {     \"mode\": \"preview\",     \"renderTemplate\": \".\/template.php\"   } } <\/code><\/pre>\n<pre><code class=\"php\">add_action( 'init', 'mytheme_block_registration' );  function mytheme_block_registration() {     foreach(glob(THEME_DIR . '\/blocks\/*', GLOB_ONLYDIR) as $dir){         register_block_type( $dir );         $dir_exploded = explode( '\/', $dir );      $block = $dir_exploded[ count( $dir_exploded ) - 1 ];         \/\/\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430 functions.php \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 if ( file_exists( get_template_directory() . '\/blocks\/' . $block . '\/functions.php' ) ) {             include_once get_template_directory() . '\/blocks\/' . $block . '\/functions.php';         }     } }<\/code><\/pre>\n<h4>Components<\/h4>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u0430\u044f \u0436\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f, \u043a\u0430\u043a \u0441 gutenberg-\u0431\u043b\u043e\u043a\u0430\u043c\u0438, \u043d\u0430\u0431\u043e\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0432 \u0432\u0438\u0434\u0435 \u043f\u0430\u043f\u043e\u043a \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438:<\/p>\n<ul>\n<li>\n<p><code>[component-name].php<\/code><\/p>\n<\/li>\n<li>\n<p><code>functions.php<\/code><\/p>\n<\/li>\n<li>\n<p><code>_index.scss<\/code><\/p>\n<\/li>\n<li>\n<p><code>_index.js<\/code><\/p>\n<\/li>\n<\/ul>\n<p>\u0418 \u0444\u0430\u0439\u043b <code>load.php<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432\u0441\u0435 php \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432:<\/p>\n<pre><code class=\"php\">foreach(glob(THEME_DIR . '\/components\/*\/functions.php') as $file){ require_once $file; }<\/code><\/pre>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>get_template_part()<\/code> , \u043a\u0443\u0434\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c <code>args<\/code> \u0432\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435:<\/p>\n<pre><code class=\"php\">get_template_part( 'components\/checkbox\/checkbox', args: [ 'label' => '\u0421heckbox label', 'name'  => 'checkbox-name', ] );<\/code><\/pre>\n<p>\u0412\u043d\u0443\u0442\u0440\u0438 \u0444\u0430\u0439\u043b\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u044b \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u0435\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0437\u0430\u0442\u0435\u043c \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u0438\u0445 \u0441 \u0432\u0445\u043e\u0434\u043d\u044b\u043c\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 \u0438 \u0440\u0430\u0441\u043f\u0430\u043a\u043e\u0432\u044b\u0432\u0430\u0435\u043c \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438 \u0441\u0442\u0440\u043e\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443:<\/p>\n<pre><code class=\"php\">\/\/ Fix PhpStorm inspection on undefined variable. if ( empty( $args ) ) { $args = []; }  $defaults = [ 'label'         => '', 'checked'       => false, 'disabled'      => false, 'custom_class'  => '',     'id'            => '',     'name'          => '',     'value'         => '', ];  \/\/ Fill args with defaults to avoid errors. $args = mytheme_parse_args( $args, $defaults );  \/\/ Unpack arguments to variables for better readability. \/\/ Should be in the same order as the keys in `$defaults` array. [ 'label'         => $label, 'checked'       => $checked, 'disabled'      => $disabled, 'custom_class'  => $custom_class, 'id'            => $id, 'name'          => $name, 'value'         => $value, ] = $args;<\/code><\/pre>\n<h4>Assets<\/h4>\n<p>\u0412\u0441\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0444\u0430\u0439\u043b\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u043e\u043f\u0430\u043b\u0438 \u043d\u0438 \u0432 components \u043d\u0438 \u0432 blocks.<\/p>\n<ul>\n<li>\n<p>css &#8212; \u041f\u0430\u043f\u043a\u0430 \u0441 \u043e\u0431\u0449\u0438\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438, \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043b\u044d\u0439\u0430\u0443\u0442\u0430\u043c\u0438, \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0438 \u043c\u0438\u043a\u0441\u0438\u043d\u0430\u043c\u0438<\/p>\n<\/li>\n<li>\n<p>js &#8212; \u041f\u0430\u043f\u043a\u0430 \u0441 \u0443\u0442\u0438\u043b\u0438\u0442\u0430\u0440\u043d\u044b\u043c\u0438 js \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 webpack<\/p>\n<\/li>\n<li>\n<p>resource &#8212; \u041f\u0430\u043f\u043a\u0430 \u0441 \u043f\u0440\u043e\u0447\u0438\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438, \u0442\u0430\u043a\u0438\u043c\u0438 \u043a\u0430\u043a \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u0448\u0440\u0438\u0444\u0442\u044b, \u0432\u0438\u0434\u0435\u043e \u0438 \u0442\u0434<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 js\/config \u043b\u0435\u0436\u0430\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 webpack, \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0443, \u043d\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u0442\u0430\u043a\u043e\u0439, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c 3 \u0442\u043e\u0447\u043a\u0438 \u0432\u0445\u043e\u0434\u0430:<\/p>\n<ul>\n<li>\n<p>index.js &#8212; \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0430\u044f \u0432\u043e \u0444\u0440\u043e\u043d\u0442-\u0435\u043d\u0434 \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/p>\n<\/li>\n<li>\n<p>admin.js &#8212; \u0421\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 \u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0434\u043b\u044f admin-\u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/p>\n<\/li>\n<li>\n<p>editor.js &#8212; \u0421\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 \u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0434\u043b\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043f\u043e 3 css \u0438 js \u0444\u0430\u0439\u043b\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0432\u0443\u044e\u0449\u0438\u0445 \u0445\u0443\u043a\u0430\u0445 WordPress.<\/p>\n<ul>\n<li>\n<p><code>wp_enqueue_scripts<\/code> &#8212; \u0421\u0442\u0438\u043b\u0438 \u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430<\/p>\n<\/li>\n<li>\n<p><code>enqueue_block_editor_assets<\/code> &#8212; \u0421\u0442\u0438\u043b\u0438 \u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0434\u043b\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430<\/p>\n<\/li>\n<li>\n<p><code>admin_enqueue_scripts<\/code> &#8212; \u0421\u0442\u0438\u043b\u0438 \u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0434\u043b\u044f \u0430\u0434\u043c\u0438\u043d \u0447\u0430\u0441\u0442\u0438 \u0441\u0430\u0439\u0442\u0430<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 index.js \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432\u0441\u0435 \u0444\u0430\u0439\u043b\u044b \u0431\u043b\u043e\u043a\u043e\u0432 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<pre><code class=\"javascript\">import '..\/css\/style.scss';  function importAll(r) {   r.keys().forEach(r); }  importAll(require.context('.\/..\/..\/assets\/resource\/fonts\/', true, \/\\.(woff|woff2|eot|ttf|otf)$\/));  \/\/ \u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0432\u0441\u0435 \u0444\u0430\u0439\u043b\u044b js \u0438 scss \u0438\u0437 \u043a\u0430\u0436\u0434\u043e\u0439 \u043f\u043e\u0434\u043f\u0430\u043f\u043a\u0438 'components' importAll(require.context('.\/..\/..\/components', true, \/\\.js$\/)); importAll(require.context('.\/..\/..\/components', true, \/\\.scss$\/));  \/\/ \u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0432\u0441\u0435 \u0444\u0430\u0439\u043b\u044b js \u0438 scss \u0438\u0437 \u043a\u0430\u0436\u0434\u043e\u0439 \u043f\u043e\u0434\u043f\u0430\u043f\u043a\u0438 'blocks' importAll(require.context('.\/..\/..\/blocks', true, \/\\.js$\/)); importAll(require.context('.\/..\/..\/blocks', true, \/\\.scss$\/));<\/code><\/pre>\n<p>\u0422\u0430\u043a\u043e\u0439 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0441\u0435\u0442\u0430\u043f \u0443\u0436\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0442\u044c 90% \u0437\u0430\u0434\u0430\u0447 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u044b \u0434\u043b\u044f WordPress.<\/p>\n<p><strong>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 REST API<br \/><\/strong>\u0414\u043b\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c WP REST API. \u042d\u0442\u043e \u043d\u0435 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442, \u043d\u043e, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430, \u0441\u0430\u043c\u044b\u0439 \u0443\u0434\u043e\u0431\u043d\u044b\u0439. \u0412\u0441\u0435 \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c &#8212; \u044d\u0442\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 <code>register_rest_route<\/code> \u0432 \u0445\u0443\u043a\u0435 <code>rest_api_init<\/code> \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e-\u043a\u043e\u043b\u0431\u044d\u043a, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043c\u0430\u0440\u0448\u0440\u0443\u0442<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442\u0430 \u0434\u043b\u044f \u0431\u043b\u043e\u043a\u0430 \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439 \u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0435\u0439 \u043f\u043e \u0442\u0430\u043a\u0441\u043e\u043d\u043e\u043c\u0438\u044f\u043c, \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b\u0438 \u0432 <a href=\"https:\/\/wewizards.ru\/news\/kak-my-sozdaem-admin-paneli-o-kotoryh-mechtajut-vse-vladelcy-sajtov\/\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435<\/a>:<\/p>\n<pre><code class=\"php\">add_action( 'rest_api_init', 'wwzrds_news_list_route' );  function wwzrds_news_list_route() {     register_rest_route( 'wwzrds\/v1', '\/news-list', [         'methods'             => 'GET',         'callback'            => 'wwzrds_news_list_route_callback',         'permission_callback' => '__return_true',     ] ); }  function wwzrds_news_list_route_callback( WP_REST_Request $request ) { $json_params = ! empty( $request['json'] ) ? $request['json'] : null;  if ( ! $json_params ) { return new WP_REST_Response( [ 'error' => 'Params are empty', ], 400 ); }  $query_args = json_decode( $json_params, true );  if ( ! $query_args ) { return new WP_REST_Response( [ 'error' => 'Params are empty', ], 400 ); }  $term = ! empty( $request['term'] ) ? $request['term'] : null; $page = ! empty( $request['page'] ) ? $request['page'] : null; $tax  = ! empty( $request['taxonomy'] ) ? $request['taxonomy'] : 'technology';  $query_args['tax_query'] = [ 'relation' => 'AND', ];  if ( $term &amp;&amp; $term !== 'all' ) { $query_args['tax_query']['term'] = [ 'taxonomy' => $tax, 'terms'    => [ $term ], 'field'    => 'slug', ]; }  if ( $page ) { $query_args['paged'] = $page; }  if ( $query_args['post_type'] !== 'post' || $query_args['post_status'] !== 'publish' ) { return new WP_REST_Response( [ 'error' => 'Invalid data', ], 400 ); }  $query     = new WP_Query( $query_args ); $max_pages = $query->max_num_pages; $news      = $query->posts; wp_reset_query();  $response = [];  if ( ! empty( $news ) ) { $response['posts'] = []; foreach ( $news as $new ) { $response['posts'][] = wwzrds_get_template_string( 'template-parts\/components\/post-item', [ 'post_id'      => $new->ID, 'attrs'        => [     'style'      => 'opacity:1; transform: translateY(0)', ], 'taxonomy'     => $tax,                 'custom_class' => 'news-list__post', ] ); } $response['pagination'] = wwzrds_generate_pagination( $page, $max_pages, false ); } else { $response['empty'] = wwzrds_get_template_string( 'template-parts\/blocks\/block-news-list\/empty-results' ); }  return new WP_REST_Response( $response, 200 ); }<\/code><\/pre>\n<p><code>wwzrds_generate_pagination<\/code> &#8212; \u0424\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0432\u0445\u043e\u0434\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p><code>wwzrds_get_template_string<\/code> &#8212; \u0424\u0443\u043d\u043a\u0446\u0438\u044f-\u0445\u0435\u043b\u043f\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0448\u0430\u0431\u043b\u043e\u043d \u043a\u0430\u043a \u0441\u0442\u0440\u043e\u043a\u0443.<\/p>\n<pre><code class=\"php\">add_action( 'rest_api_init', 'db_user_bank_endpoints' );  \/**  * Get user's bank  *  * @param  WP_REST_Request $request Full details about the request.  * @return array $args.  **\/ function db_user_bank_endpoints( $request ) { register_rest_route('wp\/v2', 'users\/bank', array( 'methods'             => 'GET', 'callback'            => 'db_rest_user_bank_handler', 'permission_callback' => function() {           return is_user_logged_in();     }, )); }  function db_rest_user_bank_handler( $request = null ) { $user     = wp_get_current_user(); $error    = new WP_Error();  if ( empty( $user ) ) { $error->add( 400, __( 'Invalid user.', 'wp-rest-run' ), ['status' => 400] ); return $error; }  return new WP_REST_Response( db_calculate_user_store( $user->ID ), 123 ); }<\/code><\/pre>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/strong><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/585\/3fa\/836\/5853fa836f3820230dad9586f1951cee.gif\" alt=\"\u0414\u0435\u043c\u043e-\u0432\u0438\u0434\u0435\u043e\" title=\"\u0414\u0435\u043c\u043e-\u0432\u0438\u0434\u0435\u043e\" width=\"1920\" height=\"726\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/585\/3fa\/836\/5853fa836f3820230dad9586f1951cee.gif\"\/><\/p>\n<div><figcaption>\u0414\u0435\u043c\u043e-\u0432\u0438\u0434\u0435\u043e<\/figcaption><\/div>\n<\/figure>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0432 \u043f\u0430\u043f\u043a\u0435 \u0442\u0435\u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u043f\u0430\u043f\u043a\u0443 \u0434\u043b\u044f \u0444\u0430\u0439\u043b\u043e\u0432 \u0432\u0438\u0434\u0436\u0435\u0442\u0430, \u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u0442\u043e\u0439 \u043f\u0430\u043f\u043a\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c package.json \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439:<\/p>\n<pre><code class=\"bash\">npm init <\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c WP Scripts \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439:<\/p>\n<pre><code class=\"bash\">npm install @wordpress\/scripts --save-dev <\/code><\/pre>\n<p>\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c package.json \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0435\u043a\u0446\u0438\u044e:<\/p>\n<pre><code class=\"json\">\"scripts\": { \"test\": \"echo \\\\\"Error: no test specified\\\\\" &amp;&amp; exit 1\", \"build\": \"wp-scripts build\", \"check-engines\": \"wp-scripts check-engines\", \"check-licenses\": \"wp-scripts check-licenses\", \"format\": \"wp-scripts format\", \"lint:css\": \"wp-scripts lint-style\", \"lint:js\": \"wp-scripts lint-js\", \"lint:md:docs\": \"wp-scripts lint-md-docs\", \"lint:md:js\": \"wp-scripts lint-md-js\", \"lint:pkg-json\": \"wp-scripts lint-pkg-json\", \"packages-update\": \"wp-scripts packages-update\", \"plugin-zip\": \"wp-scripts plugin-zip\", \"start\": \"wp-scripts start\", \"test:e2e\": \"wp-scripts test-e2e\", \"test:unit\": \"wp-scripts test-unit-js\" }, <\/code><\/pre>\n<p>\u0412 \u0442\u043e\u0439 \u0436\u0435 \u043f\u0430\u043f\u043a\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c webpack.config.js:<\/p>\n<pre><code class=\"javascript\">const defaults = require('@wordpress\/scripts\/config\/webpack.config');  module.exports = { ...defaults, externals: { react: 'React', 'react-dom': 'ReactDOM', }, };<\/code><\/pre>\n<p>\u0412 index.js \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 render \u043d\u0435 \u0438\u0437 ReactDom, \u0430 \u0438\u0437 wp.element, \u0432 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u043c \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u044b\u0447\u043d\u043e\u0435 react \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435:<\/p>\n<pre><code class=\"javascript\">const { render } = wp.element; \/\/ we are using wp.element here! import App from '.\/calculator\/components\/App';  \/\/ check if element exists before rendering const appElement = document.getElementById('calculator-app'); if (appElement) {  render(&lt;App \/>, appElement); }<\/code><\/pre>\n<p>\u0412 App.js \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 react \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0415\u0441\u043b\u0438 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0438\u0437 React \u0438\u043b\u0438 ReactDOM \u0442\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u044d\u0442\u043e \u0438\u0437 wp.element, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"javascript\">const {useState, useEffect} = wp.element;<\/code><\/pre>\n<p>\u041f\u0440\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 react \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 WordPress \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0442 &#8216;wp-element&#8217;:<\/p>\n<pre><code class=\"php\">add_action('wp_enqueue_scripts', 'calc_react_app'); function calc_react_app() { $calc_script_url = THEME_URL . '\/calculator\/build\/index.js'; $calc_script_path = THEME_DIR . '\/calculator\/build\/index.js'; wp_enqueue_script( 'my_react_app', $calc_script_url, \/\/ This refer to the built React app ['wp-element'], \/\/This dependency indicates that you need React at Frontend filemtime($calc_script_path) \/\/ This could be changed to the theme version for production ); }<\/code><\/pre>\n<p>\u0422\u0430\u043a\u043e\u0439 \u0441\u043a\u0435\u043b\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0435 \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c. \u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430\u0434 \u0442\u0435\u043c\u043e\u0439 WordPress \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/github.com\/WeWizards\/WP-start-template\" rel=\"noopener noreferrer nofollow\">\u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435<\/a>.<\/p>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043c\u043d\u043e\u0433\u0438\u0435 \u0441\u043a\u0430\u0436\u0443\u0442, \u0447\u0442\u043e \u043d\u0430\u0434\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u0444\u0440\u043e\u043d\u0442 \u043d\u0430 Vue \u0438\u043b\u0438 React \u0446\u0435\u043b\u0438\u043a\u043e\u043c, \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e REST API \u0438 \u0442. \u0434. \u2014 \u0438 \u043c\u044b \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u044b, \u043d\u043e \u043a\u0430\u0436\u0434\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 \u0432 \u0432\u044b\u0431\u043e\u0440\u0435 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u0434\u043b\u044f \u0435\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. \u041f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0439\u0442\u0435\u0441\u044c \u043d\u0430 \u0441\u043e\u0446\u0441\u0435\u0442\u0438 We Wizards \u0438 \u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c Headless WordPress + Vue\/React \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0441\u0442\u0430\u0442\u044c\u044f\u0445.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/782530\/\"> https:\/\/habr.com\/ru\/articles\/782530\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f WordPress \u2014 \u043e\u0434\u0438\u043d \u0438\u0437 \u043b\u0443\u0447\u0448\u0438\u0445 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0440\u044b\u043d\u043a\u0435. \u041a\u0430\u043a \u0438 \u043c\u043d\u043e\u0433\u0438\u0435 IT-\u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438, \u043c\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u043b\u0438 \u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u0430\u0439\u0442\u043e\u0432 \u043d\u0430 \u043a\u043e\u0440\u043e\u0431\u043e\u0447\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u0445 \u0441 \u043d\u0438\u0437\u043a\u0438\u043c \u043f\u043e\u0440\u043e\u0433\u043e\u043c \u0432\u0445\u043e\u0434\u0430. \u0420\u0430\u0441\u0448\u0438\u0440\u0438\u0432 \u044d\u043a\u0441\u043f\u0435\u0440\u0442\u0438\u0437\u0443 \u0438 \u0441\u043e\u0431\u0440\u0430\u0432 \u043c\u043e\u0449\u043d\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443, \u043c\u044b \u043d\u0430\u0443\u0447\u0438\u043b\u0438\u0441\u044c \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u00ab\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c\u00bb WordPress \u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u0433\u0440\u0430\u043c\u043e\u0442\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0435\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u043b\u0435\u0433\u0447\u0438\u0442\u044c \u0436\u0438\u0437\u043d\u044c \u0441\u0435\u0431\u0435 \u0438 \u043d\u0430\u0448\u0438\u043c \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u043c. \u041a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u0430\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u0430\u043c, \u0433\u0434\u0435 \u0435\u0441\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0438 \u043c\u043e\u0449\u043d\u044b\u0439 \u043c\u0435\u043d\u0435\u0434\u0436\u043c\u0435\u043d\u0442, \u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043b\u044e\u0431\u044b\u043c\u0438.<\/p>\n<h3>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0435\u043c, \u043a\u0430\u043a \u0441\u0442\u0440\u043e\u0438\u043c \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u043d\u0430\u0448\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 WordPress<\/h3>\n<p>\u041b\u044e\u0431\u0430\u044f CMS \u0434\u0430\u0435\u0442 \u043d\u0430\u043c \u0430\u0434\u043c\u0438\u043d\u043a\u0443 \u0438 \u044f\u0434\u0440\u043e, \u0430 \u0438\u0437 \u044f\u0434\u0440\u0430 \u0432\u044b\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u0431\u043e\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. WordPress \u0434\u0430\u0435\u0442 \u043d\u0430\u043c \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a \u043d\u0430 PHP (\u043d\u043e\u0432\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f) \u0441 \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0439 \u0430\u0434\u043c\u0438\u043d\u043a\u043e\u0439 \u0438 \u043d\u0435\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0439, \u0430 \u0432\u0441\u044e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043c\u044b \u043f\u0438\u0448\u0435\u043c \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e.<\/p>\n<p>\u041c\u044b \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u043c \u043a \u044d\u0442\u043e\u043c\u0443 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e: \u043f\u0440\u043e\u0434\u0443\u043c\u044b\u0432\u0430\u0435\u043c \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u043e\u0441\u043e\u0431\u044b\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430:<\/p>\n<ul>\n<li>\n<p>\u041f\u0435\u0440\u0432\u043e\u0435 \u2014 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u0431\u043b\u043e\u043a\u043e\u0432 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0423 WordPress \u0435\u0441\u0442\u044c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 Gutenberg (\u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0438 \u043e\u0431 \u044d\u0442\u043e\u043c\u00a0<a href=\"https:\/\/vc.ru\/u\/2305806-we-wizards\/884130-kak-my-sozdaem-admin-paneli-o-kotoryh-mechtayut-vse-vladelcy-saytov\" rel=\"noopener noreferrer nofollow\">\u0432 \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u0441\u0442\u0430\u0442\u0435\u0439<\/a>), \u0438 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0441\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0438\u0437 \u0431\u043b\u043e\u043a\u043e\u0432, \u043a\u0430\u043a \u0432 Tilda. \u042d\u0442\u043e\u0442 \u0436\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u043c \u0438 \u0432 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b: \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0431\u043b\u043e\u043a\u0438, shared-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0439\u0434\u0436-\u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442\u044b, \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0431\u0438\u0437\u043d\u0435\u0441-\u0444\u0438\u0447\u0438 \u0438 \u0442 \u0434.<\/p>\n<\/li>\n<\/ul>\n<ul>\n<li>\n<p>\u0412\u0442\u043e\u0440\u043e\u0435 \u2014 \u043c\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c JQL, \u043f\u0438\u0448\u0435\u043c \u0432\u0441\u0435 \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c JS \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u043a \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044e \u043b\u043e\u0433\u0438\u043a\u0438. \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u043c\u043e\u0436\u0435\u043c \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u043f\u0440\u0438\u043a\u0440\u0443\u0442\u0438\u0442\u044c Vue \u0438\u043b\u0438 React (\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430 WP \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438). \u041a \u0442\u043e\u043c\u0443 \u0436\u0435 \u0432 WP \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d REST API, \u0438 \u0435\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u043d\u0435\u0442 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0438\u043b\u0438 \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442\u043e\u0432, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043b\u0435\u0433\u043a\u043e \u0438\u0445 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c.<\/p>\n<\/li>\n<\/ul>\n<h3>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0430\u043f\u043e\u043a \u0438 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u043c\u044b WordPress<\/h3>\n<p>\u0424\u0430\u0439\u043b\u044b \u0432 \u043a\u043e\u0440\u043d\u0435 \u0442\u0435\u043c\u044b:<\/p>\n<ul>\n<li>\n<p><code>style.css<\/code> &#8212; \u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b, \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0442\u0435\u043c\u0435<\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0442\u0430\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u0430\u043a:<\/p>\n<ul>\n<li>\n<p>\u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0442\u0435\u043c\u044b<\/p>\n<\/li>\n<li>\n<p>\u0432\u0435\u0440\u0441\u0438\u044f \u0442\u0435\u043c\u044b<\/p>\n<\/li>\n<li>\n<p>\u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f WordPress<\/p>\n<\/li>\n<li>\n<p>\u0432\u0435\u0440\u0441\u0438\u044f PHP<\/p>\n<\/li>\n<\/ul>\n<p><a href=\"https:\/\/wp-kama.ru\/handbook\/theme\/style-css\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0442\u0443\u0442<\/a><\/p>\n<\/li>\n<li>\n<p><code>theme.json<\/code> &#8212; \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0442\u0435\u043c\u044b (\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0438, \u0446\u0432\u0435\u0442\u043e\u0432\u0430\u044f \u043f\u0430\u043b\u0438\u0442\u0440\u0430)<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a <code>theme.json<\/code><\/p>\n<pre><code class=\"json\">{     \"version\": 1,     \"settings\": {         \"typography\": {             \"customFontSize\": false,             \"lineHeight\": true,             \"fontSizes\": [                 {                     \"slug\": \"h1\",                     \"size\": \"6rem\",                     \"name\": \"H1\"                 },                 {                     \"slug\": \"h2\",                     \"size\": \"2.88rem\",                     \"name\": \"H2\"                 },                 {                     \"slug\": \"h3\",                     \"size\": \"1.5rem\",                     \"name\": \"H3\"                 },                 {                     \"slug\": \"text_46\",                     \"size\": \"2.88rem\",                     \"name\": \"Text 46\"                 },                 {                     \"slug\": \"text_24\",                     \"size\": \"1.5rem\",                     \"name\": \"Text 24\"                 },                 {                     \"slug\": \"text_16\",                     \"size\": \"1rem\",                     \"name\": \"Text 16\"                 }             ]         },         \"spacing\": {             \"spacingSizes\": [                 {                     \"size\": \"clamp(1.5rem, 5vw, 2rem)\",                     \"slug\": \"30\",                     \"name\": \"1\"                 },                 {                     \"size\": \"clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem)\",                     \"slug\": \"40\",                     \"name\": \"2\"                 },                 {                     \"size\": \"clamp(2.5rem, 8vw, 6.5rem)\",                     \"slug\": \"50\",                     \"name\": \"3\"                 }             ],             \"blockGap\": true,             \"customPadding\": true,             \"customMargin\": true,             \"units\": [                 \"px\",                 \"rem\",                 \"%\"             ]         },         \"color\": {             \"palette\": [                 {                     \"slug\": \"black\",                     \"color\": \"#000000\",                     \"name\": \"Black\"                 },                 {                     \"slug\": \"pink\",                     \"color\": \"#F2CFCE\",                     \"name\": \"Pink\"                 },                 {                     \"slug\": \"white\",                     \"color\": \"#ffffff\",                     \"name\": \"White\"                 },                 {                     \"slug\": \"grey\",                     \"color\": \"#A5A5A5\",                     \"name\": \"Grey\"                 }             ]         }     } } <\/code><\/pre>\n<\/li>\n<li>\n<p><code>functions.php<\/code> &#8212; \u0412\u0445\u043e\u0434\u043d\u043e\u0439 \u0444\u0430\u0439\u043b \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 php<\/p>\n<p>\u0422\u0443\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 load \u0444\u0430\u0439\u043b\u0430 \u0438\u0437 \u043f\u0430\u043f\u043a\u0438 includes (\u0433\u0434\u0435 \u043b\u0435\u0436\u0430\u0442 \u0432\u0441\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 php \u0441\u043a\u0440\u0438\u043f\u0442\u044b), \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f load \u0444\u0430\u0439\u043b\u0430 \u0438\u0437 \u043f\u0430\u043f\u043a\u0438 blocks \u0438 components<\/p>\n<\/li>\n<li>\n<p><code>header.php<\/code> &#8212; \u0428\u0430\u0431\u043b\u043e\u043d \u0448\u0430\u043f\u043a\u0438 \u0441\u0430\u0439\u0442\u0430<\/p>\n<p>\u0422\u0443\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>wp_head()<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u043c\u0435\u0442\u0430-\u0442\u0435\u0433\u0438<\/p>\n<\/li>\n<li>\n<p><code>footer.php<\/code> &#8212; \u0428\u0430\u0431\u043b\u043e\u043d \u043f\u043e\u0434\u0432\u0430\u043b\u0430 \u0441\u0430\u0439\u0442\u0430<\/p>\n<p>\u0422\u0443\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>wp_footer()<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442 js-\u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0442\u0435\u043c\u044b \u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432<\/p>\n<\/li>\n<li>\n<p><code>page.php<\/code> &#8212; \u0414\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/p>\n<p>\u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0442\u0443\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 <code>header.php<\/code> \u0438 <code>footer.php<\/code> c \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0439 <code>get_header()<\/code> \u0438 <code>get_footer()<\/code> \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n<pre><code class=\"php\">get_header();  if ( have_posts() ) {     while ( have_posts() ) {         the_post();         the_content();     } }  get_footer();<\/code><\/pre>\n<\/li>\n<li>\n<p><code>package.json<\/code> &#8212; \u0417\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/p>\n<\/li>\n<li>\n<p><code>index.php<\/code> &#8212; \u041f\u0443\u0441\u0442\u043e\u0439 \u0438\u043d\u0434\u0435\u043a\u0441\u043d\u044b\u0439 \u0444\u0430\u0439\u043b<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0430\u043f\u043a\u0438:<\/p>\n<ul>\n<li>\n<p><code>acf-json<\/code> &#8212; \u041f\u0430\u043f\u043a\u0430 \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u043e\u0432 \u043f\u043e\u043b\u0435\u0439 \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0441 \u043e\u043f\u0446\u0438\u044f\u043c\u0438, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c Advanced Custom Fields. \u042d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0435\u0441\u043b\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0432\u0435\u0434\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435, \u0432\u0441\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u0435\u0439 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0433\u0438\u0442\u0435<\/p>\n<\/li>\n<li>\n<p><code>assets<\/code> &#8212; \u0422\u0443\u0442 \u043b\u0435\u0436\u0430\u0442 \u0432\u0441\u0435 \u0441\u0442\u0438\u043b\u0438, \u0441\u043a\u0440\u0438\u043f\u0442\u044b, \u0448\u0440\u0438\u0444\u0442\u044b \u0438 \u043f\u0440\u043e\u0447\u0438\u0435 \u0444\u0430\u0439\u043b\u044b, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0435 \u0437\u0430 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434<\/p>\n<\/li>\n<li>\n<p><code>blocks<\/code> &#8212; \u041a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 gutenberg \u0431\u043b\u043e\u043a\u0438<\/p>\n<\/li>\n<li>\n<p><code>components<\/code> &#8212; \u041f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/p>\n<\/li>\n<li>\n<p><code>includes<\/code> &#8212; \u041f\u0430\u043f\u043a\u0430 \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u0430\u043c\u0438 php<\/p>\n<\/li>\n<li>\n<p><code>page-templates<\/code> &#8212; \u0428\u0430\u0431\u043b\u043e\u043d\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446<\/p>\n<\/li>\n<\/ul>\n<pre><code>Theme_folder \u251c\u2500\u2500 acf-json \u2502   \u251c\u2500\u2500 group_64c25ae72741a.json \u2502   \u2514\u2500\u2500 ... \u251c\u2500\u2500 assets \u2502   \u251c\u2500\u2500 css \u2502   \u251c\u2500\u2500 js \u2502   \u2502   \u251c\u2500\u2500 config \u2502   \u2502   \u251c\u2500\u2500 admin.js \u2502   \u2502   \u251c\u2500\u2500 editor.js \u2502   \u2502   \u2514\u2500\u2500 index.js \u2502   \u2514\u2500\u2500 resource \u251c\u2500\u2500 blocks \u2502   \u251c\u2500\u2500 block1 \u2502   \u2502   \u251c\u2500\u2500 block.json \u2502   \u2502   \u251c\u2500\u2500 functions.php \u2502   \u2502   \u251c\u2500\u2500 template.php \u2502   \u2502   \u251c\u2500\u2500 _index.scss \u2502   \u2502   \u2514\u2500\u2500 _index.js \u2502   \u2514\u2500\u2500 load.php \u251c\u2500\u2500 components \u2502   \u251c\u2500\u2500 component1 \u2502   \u2502   \u251c\u2500\u2500 [component-name].php \u2502   \u2502   \u251c\u2500\u2500 functions.php \u2502   \u2502   \u251c\u2500\u2500 _index.scss \u2502   \u2502   \u2514\u2500\u2500 _index.js \u2502   \u2514\u2500\u2500 load.php \u251c\u2500\u2500 includes \u2502   \u251c\u2500\u2500 [module-name].php \u2502   \u2514\u2500\u2500 load.php \u251c\u2500\u2500 page-templates \u251c\u2500\u2500 footer.php \u251c\u2500\u2500 functions.php \u251c\u2500\u2500 header.php \u251c\u2500\u2500 index.php \u251c\u2500\u2500 package.json \u251c\u2500\u2500 page.php \u251c\u2500\u2500 style.css \u2514\u2500\u2500 theme.json<\/code><\/pre>\n<h4>Gutenberg blocks<\/h4>\n<p>\u0412\u0438\u0434\u0435\u043e \u0441 \u0434\u0435\u043c\u043e<\/p>\n<p><a href=\"https:\/\/www.loom.com\/share\/2c19f771a64f4c69b10484972d5163b5\" rel=\"noopener noreferrer nofollow\">https:\/\/www.loom.com\/share\/2c19f771a64f4c69b10484972d5163b5<\/a><\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u043f\u0430\u043f\u043a\u0435 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0441\u0430\u043c\u0438 \u0431\u043b\u043e\u043a\u0438 \u0432 \u043f\u043e\u0434\u043f\u0430\u043f\u043a\u0430\u0445 \u0438 \u0444\u0430\u0439\u043b load.php, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0432\u0441\u0435\u0445 \u0431\u043b\u043e\u043a\u043e\u0432.<\/p>\n<p>\u0411\u043b\u043e\u043a \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0432 \u0432\u0438\u0434\u0435 \u043f\u0430\u043f\u043a\u0438 \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438:<\/p>\n<ul>\n<li>\n<p><code>block.json<\/code> &#8212; \u0414\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0431\u043b\u043e\u043a\u0430, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a name, title, \u0438 \u0442\u0434<\/p>\n<\/li>\n<li>\n<p><code>template.php<\/code> &#8212; \u0424\u0430\u0439\u043b \u0441 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439 \u0431\u043b\u043e\u043a\u0430<\/p>\n<\/li>\n<li>\n<p><code>functions.php<\/code> &#8212; PHP \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u044d\u0442\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430<\/p>\n<\/li>\n<li>\n<p><code>_index.scss<\/code> &#8212; \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0431\u043b\u043e\u043a\u0430<\/p>\n<\/li>\n<li>\n<p><code>_index.js<\/code> &#8212; \u0421\u043a\u0440\u0438\u043f\u0442\u044b \u0434\u043b\u044f \u0431\u043b\u043e\u043a\u0430<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"json\">{   \"name\" : \"mytheme\/custom-block\",   \"title\" : \"Custom Block\",   \"icon\": \"admin-site\",   \"description\": \"My awesome custom block.\",   \"apiVersion\": 3,   \"textdomain\": \"mytheme\",   \"supports\": {     \"align\" : false,     \"mode\"  : false,     \"jsx\"   : true,     \"anchor\": true   },   \"acf\": {     \"mode\": \"preview\",     \"renderTemplate\": \".\/template.php\"   } } <\/code><\/pre>\n<pre><code class=\"php\">add_action( 'init', 'mytheme_block_registration' );  function mytheme_block_registration() {     foreach(glob(THEME_DIR . '\/blocks\/*', GLOB_ONLYDIR) as $dir){         register_block_type( $dir );         $dir_exploded = explode( '\/', $dir );      $block = $dir_exploded[ count( $dir_exploded ) - 1 ];         \/\/\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430 functions.php \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 if ( file_exists( get_template_directory() . '\/blocks\/' . $block . '\/functions.php' ) ) {             include_once get_template_directory() . '\/blocks\/' . $block . '\/functions.php';         }     } }<\/code><\/pre>\n<h4>Components<\/h4>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u0430\u044f \u0436\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f, \u043a\u0430\u043a \u0441 gutenberg-\u0431\u043b\u043e\u043a\u0430\u043c\u0438, \u043d\u0430\u0431\u043e\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0432 \u0432\u0438\u0434\u0435 \u043f\u0430\u043f\u043e\u043a \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438:<\/p>\n<ul>\n<li>\n<p><code>[component-name].php<\/code><\/p>\n<\/li>\n<li>\n<p><code>functions.php<\/code><\/p>\n<\/li>\n<li>\n<p><code>_index.scss<\/code><\/p>\n<\/li>\n<li>\n<p><code>_index.js<\/code><\/p>\n<\/li>\n<\/ul>\n<p>\u0418 \u0444\u0430\u0439\u043b <code>load.php<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432\u0441\u0435 php \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432:<\/p>\n<pre><code class=\"php\">foreach(glob(THEME_DIR . '\/components\/*\/functions.php') as $file){ require_once $file; }<\/code><\/pre>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>get_template_part()<\/code> , \u043a\u0443\u0434\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c <code>args<\/code> \u0432\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435:<\/p>\n<pre><code class=\"php\">get_template_part( 'components\/checkbox\/checkbox', args: [ 'label' => '\u0421heckbox label', 'name'  => 'checkbox-name', ] );<\/code><\/pre>\n<p>\u0412\u043d\u0443\u0442\u0440\u0438 \u0444\u0430\u0439\u043b\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u044b \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u0435\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0437\u0430\u0442\u0435\u043c \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u0438\u0445 \u0441 \u0432\u0445\u043e\u0434\u043d\u044b\u043c\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 \u0438 \u0440\u0430\u0441\u043f\u0430\u043a\u043e\u0432\u044b\u0432\u0430\u0435\u043c \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438 \u0441\u0442\u0440\u043e\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443:<\/p>\n<pre><code class=\"php\">\/\/ Fix PhpStorm inspection on undefined variable. if ( empty( $args ) ) { $args = []; }  $defaults = [ 'label'         => '', 'checked'       => false, 'disabled'      => false, 'custom_class'  => '',     'id'            => '',     'name'          => '',     'value'         => '', ];  \/\/ Fill args with defaults to avoid errors. $args = mytheme_parse_args( $args, $defaults );  \/\/ Unpack arguments to variables for better readability. \/\/ Should be in the same order as the keys in `$defaults` array. [ 'label'         => $label, 'checked'       => $checked, 'disabled'      => $disabled, 'custom_class'  => $custom_class, 'id'            => $id, 'name'          => $name, 'value'         => $value, ] = $args;<\/code><\/pre>\n<h4>Assets<\/h4>\n<p>\u0412\u0441\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0444\u0430\u0439\u043b\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u043e\u043f\u0430\u043b\u0438 \u043d\u0438 \u0432 components \u043d\u0438 \u0432 blocks.<\/p>\n<ul>\n<li>\n<p>css &#8212; \u041f\u0430\u043f\u043a\u0430 \u0441 \u043e\u0431\u0449\u0438\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438, \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043b\u044d\u0439\u0430\u0443\u0442\u0430\u043c\u0438, \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0438 \u043c\u0438\u043a\u0441\u0438\u043d\u0430\u043c\u0438<\/p>\n<\/li>\n<li>\n<p>js &#8212; \u041f\u0430\u043f\u043a\u0430 \u0441 \u0443\u0442\u0438\u043b\u0438\u0442\u0430\u0440\u043d\u044b\u043c\u0438 js \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 webpack<\/p>\n<\/li>\n<li>\n<p>resource &#8212; \u041f\u0430\u043f\u043a\u0430 \u0441 \u043f\u0440\u043e\u0447\u0438\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438, \u0442\u0430\u043a\u0438\u043c\u0438 \u043a\u0430\u043a \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u0448\u0440\u0438\u0444\u0442\u044b, \u0432\u0438\u0434\u0435\u043e \u0438 \u0442\u0434<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 js\/config \u043b\u0435\u0436\u0430\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 webpack, \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0443, \u043d\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u0442\u0430\u043a\u043e\u0439, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c 3 \u0442\u043e\u0447\u043a\u0438 \u0432\u0445\u043e\u0434\u0430:<\/p>\n<ul>\n<li>\n<p>index.js &#8212; \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0430\u044f \u0432\u043e \u0444\u0440\u043e\u043d\u0442-\u0435\u043d\u0434 \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/p>\n<\/li>\n<li>\n<p>admin.js &#8212;<\/p>\n<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-363734","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/363734","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=363734"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/363734\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=363734"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=363734"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=363734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}