<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Без рубрики &#8211; SOAP.ZONE</title>
	<atom:link href="https://soap.zone/category/bez-rubriki/feed/" rel="self" type="application/rss+xml" />
	<link>https://soap.zone</link>
	<description>Creativity Internet Studio</description>
	<lastBuildDate>Fri, 07 Feb 2025 14:51:09 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8.3</generator>

<image>
	<url>https://soap.zone/wp-content/uploads/2025/02/cropped-LOGO-1-32x32.jpg</url>
	<title>Без рубрики &#8211; SOAP.ZONE</title>
	<link>https://soap.zone</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Популярные JS-библиотеки и фреймворки</title>
		<link>https://soap.zone/2025/02/07/espace-pre-lang/</link>
					<comments>https://soap.zone/2025/02/07/espace-pre-lang/#respond</comments>
		
		<dc:creator><![CDATA[soap.zone]]></dc:creator>
		<pubDate>Fri, 07 Feb 2025 14:50:07 +0000</pubDate>
				<category><![CDATA[Без рубрики]]></category>
		<guid isPermaLink="false">https://soap.zone/?p=4282</guid>

					<description><![CDATA[Пример кода  Вот универсальный блок кода, который подключает jQuery и другие популярные библиотеки (Bootstrap, Lodash, Axios) в одном месте: html &#60;!-- Подключение библиотек --&#62; &#60;script src="https://code.jquery.com/jquery-3.6.0.min.js"&#62;&#60;/script&#62; &#60;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"&#62;&#60;/script&#62; &#60;script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"&#62;&#60;/script&#62; &#60;script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"&#62;&#60;/script&#62; &#60;!-- Пользовательский код --&#62; &#60;script&#62; $(document).ready(() =&#62; { $(".ten").on("click", () =&#62; $(".six").click()); // Пример использования Lodash console.log(_.random(1, 100)); // Пример запроса через Axios [&#8230;]]]></description>
										<content:encoded><![CDATA[<h3><strong>Пример кода </strong></h3>
<p>Вот универсальный блок кода, который подключает jQuery и другие популярные библиотеки (Bootstrap, Lodash, Axios) в одном месте:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment">&lt;!-- Подключение библиотек --&gt;</span><br />
</code></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://code.jquery.com/jquery-3.6.0.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
<div dir="ltr"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
<div dir="ltr"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment">&lt;!-- Пользовательский код --&gt; </span></code></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span></span></code></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment"><span class="language-javascript"> $(<span class="hljs-variable language_">document</span>).<span class="hljs-title function_">ready</span>(<span class="hljs-function">() =&gt;</span> { $(<span class="hljs-string">".ten"</span>).<span class="hljs-title function_">on</span>(<span class="hljs-string">"click"</span>, <span class="hljs-function">() =&gt;</span> $(<span class="hljs-string">".six"</span>).<span class="hljs-title function_">click</span>()); </span></span></code></div>
<div dir="ltr"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment"><span class="language-javascript">// Пример использования</span></span></code><code class="!whitespace-pre language-html"><span class="hljs-comment"><span class="language-javascript"> Lodash </span></span></code></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment"><span class="language-javascript"><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(_.<span class="hljs-title function_">random</span>(<span class="hljs-number">1</span>, <span class="hljs-number">100</span>)); </span></span></code></div>
<div dir="ltr"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment"><span class="language-javascript">// Пример запроса через Axios </span></span></code></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment"><span class="language-javascript">axios.<span class="hljs-title function_">get</span>(<span class="hljs-string">'https://jsonplaceholder.typicode.com/todos/1'</span>) .<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">response</span> =&gt;</span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(response.<span class="hljs-property">data</span>)) .<span class="hljs-title function_">catch</span>(<span class="hljs-function"><span class="hljs-params">error</span> =&gt;</span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(error)); }); </span></span></code></div>
<div dir="ltr"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span></code></div>
</div>
<p>&nbsp;</p>
<h1><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f4cc.png" alt="📌" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Популярные JS-библиотеки и фреймворки</strong></h1>
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>1. jQuery</strong> (разные источники)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><code class="!whitespace-pre language-html"><span class="hljs-comment">&lt;!-- jQuery с Google CDN --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></code><span class="hljs-comment">&lt;!&#8211; jQuery с Microsoft CDN &#8211;&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&#8220;https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js&#8221;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><code class="!whitespace-pre language-html"><code class="!whitespace-pre language-html"></code></code><span class="hljs-comment">&lt;!&#8211; jQuery с официального jQuery CDN &#8211;&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&#8220;https://code.jquery.com/jquery-3.6.0.min.js&#8221;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>2. Bootstrap</strong> (CSS + JS + Popper.js)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><code class="!whitespace-pre language-html"><span class="hljs-comment">&lt;!-- Bootstrap CSS --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span>&gt;</span></code></code><span class="hljs-comment">&lt;!&#8211; Bootstrap JS (с Popper.js) &#8211;&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&#8220;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js&#8221;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>3. Vue.js</strong></h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><code class="!whitespace-pre language-html"><span class="hljs-comment">&lt;!-- Vue 2 --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></code><span class="hljs-comment">&lt;!&#8211; Vue 3 &#8211;&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&#8220;https://unpkg.com/vue@3.2.31/dist/vue.global.js&#8221;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>4. React + ReactDOM</strong></h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment">&lt;!-- React --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/react@18/umd/react.production.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>5. Angular</strong></h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment">&lt;!-- Angular --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>6. Lodash</strong> (утилиты для работы с массивами и объектами)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>7. Axios</strong> (работа с HTTP-запросами)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>8. Moment.js</strong> (работа с датами и временем)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>9. Chart.js</strong> (графики и диаграммы)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/chart.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>10. D3.js</strong> (визуализация данных)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://d3js.org/d3.v7.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>11. Three.js</strong> (3D-графика)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>12. Swiper.js</strong> (слайдеры и карусели)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment">&lt;!-- Swiper CSS --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://unpkg.com/swiper/swiper-bundle.min.css"</span>&gt;</span><br />
<span class="hljs-comment">&lt;!-- Swiper JS --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/swiper/swiper-bundle.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>13. Slick Carousel</strong> (слайдеры и карусели)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment">&lt;!-- Slick CSS --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"</span>/&gt;</span><br />
<span class="hljs-comment">&lt;!-- Slick JS --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>14. GSAP</strong> (анимации)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>15. Anime.js</strong> (анимации)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>16. Particles.js</strong> (анимация частиц)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>17. AOS (Animate On Scroll)</strong> (анимации при прокрутке)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment">&lt;!-- AOS CSS --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://unpkg.com/aos@2.3.1/dist/aos.css"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span>&gt;</span><br />
<span class="hljs-comment">&lt;!-- AOS JS --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/aos@2.3.1/dist/aos.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>18. Font Awesome</strong> (иконки)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://kit.fontawesome.com/ВАШ-КОД.js"</span> <span class="hljs-attr">crossorigin</span>=<span class="hljs-string">"anonymous"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>19. Tailwind CSS</strong> (утилитарный CSS-фреймворк)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment">&lt;!-- Tailwind CSS --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.tailwindcss.com"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>20. SweetAlert2</strong> (красивые модальные окна)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment">&lt;!-- SweetAlert2 CSS --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.min.css"</span>&gt;</span><br />
<span class="hljs-comment">&lt;!-- SweetAlert2 JS --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.all.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>21. Popper.js</strong> (используется для всплывающих подсказок)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h2><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f539.png" alt="🔹" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>22. jQuery UI</strong> (расширение для jQuery)</h2>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]"></div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="!whitespace-pre language-html"><span class="hljs-comment">&lt;!-- jQuery UI CSS --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"</span>&gt;</span><br />
<span class="hljs-comment">&lt;!-- jQuery UI JS --&gt;</span><br />
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br />
</code></div>
</div>
<hr />
<h1><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f4cc.png" alt="📌" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Дополнительные ресурсы</strong></h1>
<ul>
<li><a href="https://cdnjs.com/" target="_new" rel="noopener"><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f517.png" alt="🔗" class="wp-smiley" style="height: 1em; max-height: 1em;" /> CDNJS</a> – большая база библиотек.</li>
<li><a href="https://www.jsdelivr.com/" target="_new" rel="noopener"><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f517.png" alt="🔗" class="wp-smiley" style="height: 1em; max-height: 1em;" /> jsDelivr</a> – быстрый CDN для популярных библиотек.</li>
<li><a href="https://unpkg.com/" target="_new" rel="noopener"><img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f517.png" alt="🔗" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Unpkg</a> – удобен для NPM-пакетов.</li>
</ul>
</div>
]]></content:encoded>
					
					<wfw:commentRss>https://soap.zone/2025/02/07/espace-pre-lang/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Как все изображения сделать квадратными?</title>
		<link>https://soap.zone/2024/09/17/squre/</link>
					<comments>https://soap.zone/2024/09/17/squre/#respond</comments>
		
		<dc:creator><![CDATA[soap.zone]]></dc:creator>
		<pubDate>Tue, 17 Sep 2024 18:31:18 +0000</pubDate>
				<category><![CDATA[Без рубрики]]></category>
		<guid isPermaLink="false">https://soap.zone/?p=2079</guid>

					<description><![CDATA[div { /* Блок обертки картинки */ width: 20%; /* Тут ширина ваша, высота будет считаться на хаке ниже */ position: relative; /* Это обязательно */ /* Временные стили*/ background-color: #eee; margin: 30px auto; } div:before { /* Хак формирования соотношения сторон для квадрата 1:1, исходя из ширины */ content: ""; display: block; padding-bottom: 100%; [&#8230;]]]></description>
										<content:encoded><![CDATA[<pre>
div {
  /* Блок обертки картинки */
  width: 20%;
  /* Тут ширина ваша, высота будет считаться на хаке ниже */
  position: relative;
  /* Это обязательно */

  /* Временные стили*/
  background-color: #eee;
  margin: 30px auto;

}

div:before {
  /* Хак формирования соотношения сторон для квадрата 1:1, исходя из ширины */
  content: "";
  display: block;
  padding-bottom: 100%;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  display: inline-block;
  width: auto;
  min-width: 1px;
  max-width: 100%;
  height: initial;
  min-height: 1px;
  max-height: 100%;
}
</pre>
]]></content:encoded>
					
					<wfw:commentRss>https://soap.zone/2024/09/17/squre/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Добавить выбор количества в список товаров</title>
		<link>https://soap.zone/2024/08/27/%d0%b4%d0%be%d0%b1%d0%b0%d0%b2%d0%b8%d1%82%d1%8c-%d0%b2%d1%8b%d0%b1%d0%be%d1%80-%d0%ba%d0%be%d0%bb%d0%b8%d1%87%d0%b5%d1%81%d1%82%d0%b2%d0%b0-%d0%b2-%d1%81%d0%bf%d0%b8%d1%81%d0%be%d0%ba-%d1%82%d0%be/</link>
					<comments>https://soap.zone/2024/08/27/%d0%b4%d0%be%d0%b1%d0%b0%d0%b2%d0%b8%d1%82%d1%8c-%d0%b2%d1%8b%d0%b1%d0%be%d1%80-%d0%ba%d0%be%d0%bb%d0%b8%d1%87%d0%b5%d1%81%d1%82%d0%b2%d0%b0-%d0%b2-%d1%81%d0%bf%d0%b8%d1%81%d0%be%d0%ba-%d1%82%d0%be/#respond</comments>
		
		<dc:creator><![CDATA[soap.zone]]></dc:creator>
		<pubDate>Mon, 26 Aug 2024 23:04:20 +0000</pubDate>
				<category><![CDATA[Без рубрики]]></category>
		<guid isPermaLink="false">https://soap.zone/?p=2045</guid>

					<description><![CDATA[// 1. Добавление новой колонки для количества товаров на складе перед столбцом "В наличии" add_filter('manage_edit-product_columns', 'custom_product_columns'); function custom_product_columns($columns) { // Проверяем роль пользователя if (!current_user_can('admin_shop') &#038;& !current_user_can('administrator')) { return $columns; // Возвращаем исходные колонки, если роль не соответствует } // Создаем новый массив с колонками $reordered_columns = array(); // Проходимся по всем существующим колонкам foreach [&#8230;]]]></description>
										<content:encoded><![CDATA[
<pre>

// 1. Добавление новой колонки для количества товаров на складе перед столбцом "В наличии"
add_filter('manage_edit-product_columns', 'custom_product_columns');
function custom_product_columns($columns) {
    // Проверяем роль пользователя
    if (!current_user_can('admin_shop') && !current_user_can('administrator')) {
        return $columns; // Возвращаем исходные колонки, если роль не соответствует
    }
    
    // Создаем новый массив с колонками
    $reordered_columns = array();
    
    // Проходимся по всем существующим колонкам
    foreach ($columns as $key => $value) {
        // Перед добавлением колонки 'is_in_stock' (В наличии) добавляем нашу новую колонку
        if ($key == 'is_in_stock') {
            $reordered_columns['stock_quantity'] = __('Количество на складе', 'woocommerce');
        }

        $reordered_columns[$key] = $value;
    }

    return $reordered_columns;
}

// 2. Заполнение колонки данными
add_action('manage_product_posts_custom_column', 'custom_product_column_content', 10, 2);
function custom_product_column_content($column, $post_id) {
    // Проверяем роль пользователя
    if (!current_user_can('admin_shop') && !current_user_can('administrator')) {
        return; // Прекращаем выполнение, если роль не соответствует
    }

    if ($column === 'stock_quantity') {
        $stock = get_post_meta($post_id, '_stock', true);
        echo '<div class="stock_quantity" data-product-id="' . $post_id . '">';
        echo '<input type="number" value="' . esc_attr($stock) . '" style="width: 60px;" />';
        echo '</div>';
    }
}

// 3. AJAX обработка изменения количества товаров
add_action('wp_ajax_update_stock_quantity', 'update_stock_quantity');
function update_stock_quantity() {
    // Проверяем роль пользователя
    if (!current_user_can('admin_shop') && !current_user_can('administrator')) {
        wp_send_json_error(); // Прекращаем выполнение, если роль не соответствует
        return;
    }

    if (isset($_POST['product_id']) && isset($_POST['quantity'])) {
        $product_id = intval($_POST['product_id']);
        $quantity = intval($_POST['quantity']);
        update_post_meta($product_id, '_stock', $quantity);
        wp_send_json_success();
    } else {
        wp_send_json_error();
    }
}

// 4. Скрипт для обработки изменения количества товаров в колонке
add_action('admin_footer', 'stock_quantity_editable_script');
function stock_quantity_editable_script() {
    // Проверяем роль пользователя
    if (!current_user_can('admin_shop') && !current_user_can('administrator')) {
        return; // Прекращаем выполнение, если роль не соответствует
    }

    global $pagenow;
    if ($pagenow !== 'edit.php' || get_post_type() !== 'product') {
        return;
    }
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('.stock_quantity input').on('change', function() {
                var $input = $(this);
                var product_id = $input.closest('.stock_quantity').data('product-id');
                var quantity = $input.val();

                $.ajax({
                    url: ajaxurl,
                    type: 'POST',
                    data: {
                        action: 'update_stock_quantity',
                        product_id: product_id,
                        quantity: quantity
                    },
                    success: function(response) {
                        if (response.success) {
                            $input.css('border-color', 'green');
                        } else {
                            $input.css('border-color', 'red');
                        }
                    }
                });
            });
        });
    </script>
    <style>
        /* Добавляем отступ справа для колонки с количеством на складе */
        .column-stock_quantity {
            width: 80px; /* Задаем ширину для новой колонки */
            padding-right: 20px; /* Отступ справа */
        }
    </style>
    <?php
}
//
</pre>



<p></p>



<p></p>
]]></content:encoded>
					
					<wfw:commentRss>https://soap.zone/2024/08/27/%d0%b4%d0%be%d0%b1%d0%b0%d0%b2%d0%b8%d1%82%d1%8c-%d0%b2%d1%8b%d0%b1%d0%be%d1%80-%d0%ba%d0%be%d0%bb%d0%b8%d1%87%d0%b5%d1%81%d1%82%d0%b2%d0%b0-%d0%b2-%d1%81%d0%bf%d0%b8%d1%81%d0%be%d0%ba-%d1%82%d0%be/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Несколько популярных онлайн-редакторов кода</title>
		<link>https://soap.zone/2024/08/16/%d0%b2%d0%be%d1%82-%d0%bd%d0%b5%d1%81%d0%ba%d0%be%d0%bb%d1%8c%d0%ba%d0%be-%d0%bf%d0%be%d0%bf%d1%83%d0%bb%d1%8f%d1%80%d0%bd%d1%8b%d1%85-%d0%be%d0%bd%d0%bb%d0%b0%d0%b9%d0%bd-%d1%80%d0%b5%d0%b4%d0%b0/</link>
					<comments>https://soap.zone/2024/08/16/%d0%b2%d0%be%d1%82-%d0%bd%d0%b5%d1%81%d0%ba%d0%be%d0%bb%d1%8c%d0%ba%d0%be-%d0%bf%d0%be%d0%bf%d1%83%d0%bb%d1%8f%d1%80%d0%bd%d1%8b%d1%85-%d0%be%d0%bd%d0%bb%d0%b0%d0%b9%d0%bd-%d1%80%d0%b5%d0%b4%d0%b0/#respond</comments>
		
		<dc:creator><![CDATA[soap.zone]]></dc:creator>
		<pubDate>Fri, 16 Aug 2024 13:12:14 +0000</pubDate>
				<category><![CDATA[Без рубрики]]></category>
		<guid isPermaLink="false">https://soap.zone/?p=1776</guid>

					<description><![CDATA[Вот несколько популярных онлайн-редакторов кода, аналогичных JSFiddle, которые позволяют писать, тестировать и делиться HTML, CSS и JavaScript: Эти инструменты позволяют вам работать с кодом прямо в браузере и видеть результаты в реальном времени. Вы также можете делиться своими проектами с другими пользователями.]]></description>
										<content:encoded><![CDATA[
<p>Вот несколько популярных онлайн-редакторов кода, аналогичных <a href="https://jsfiddle.net/">JSFiddle</a>, которые позволяют писать, тестировать и делиться HTML, CSS и JavaScript:</p>



<ol class="wp-block-list">
<li><strong>CodePen</strong> (<a href="https://codepen.io/">https://codepen.io/</a>)<br>Один из самых популярных онлайн-редакторов. Позволяет создавать проекты, делиться ими и даже находить вдохновение среди работ других пользователей.</li>



<li><strong>JSBin</strong> (<a href="https://jsbin.com/">https://jsbin.com/</a>)<br>Легкий и простой инструмент для быстрого тестирования и отладки кода в браузере. Поддерживает совместную работу и интеграцию с GitHub.</li>



<li><strong>JSFiddle</strong> (<a href="https://jsfiddle.net/">https://jsfiddle.net/</a>)<br>Сам JSFiddle, если вам нужно быстро протестировать фрагменты HTML, CSS и JavaScript, а также делиться кодом с другими.</li>



<li><strong>CodeSandbox</strong> (<a href="https://codesandbox.io/">https://codesandbox.io/</a>)<br>Мощный онлайн-редактор, предназначенный для разработки приложений на JavaScript и TypeScript, поддерживает React, Vue, Angular и другие фреймворки.</li>



<li><strong>Repl.it</strong> (<a href="https://replit.com/">https://replit.com/</a>)<br>Универсальная платформа для кодирования, которая поддерживает множество языков программирования. Хорошо подходит для совместной работы и обучения.</li>



<li><strong>Codeply</strong> (<a href="https://www.codeply.com/">https://www.codeply.com/</a>)<br>Фокусируется на работе с фронтенд-фреймворками, такими как Bootstrap, Foundation, Materialize и др.</li>
</ol>



<p>Эти инструменты позволяют вам работать с кодом прямо в браузере и видеть результаты в реальном времени. Вы также можете делиться своими проектами с другими пользователями.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://soap.zone/2024/08/16/%d0%b2%d0%be%d1%82-%d0%bd%d0%b5%d1%81%d0%ba%d0%be%d0%bb%d1%8c%d0%ba%d0%be-%d0%bf%d0%be%d0%bf%d1%83%d0%bb%d1%8f%d1%80%d0%bd%d1%8b%d1%85-%d0%be%d0%bd%d0%bb%d0%b0%d0%b9%d0%bd-%d1%80%d0%b5%d0%b4%d0%b0/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Замена футера</title>
		<link>https://soap.zone/2024/08/12/%d0%b7%d0%b0%d0%bc%d0%b5%d0%bd%d0%b0-%d1%84%d1%83%d1%82%d0%b5%d1%80%d0%b0/</link>
					<comments>https://soap.zone/2024/08/12/%d0%b7%d0%b0%d0%bc%d0%b5%d0%bd%d0%b0-%d1%84%d1%83%d1%82%d0%b5%d1%80%d0%b0/#respond</comments>
		
		<dc:creator><![CDATA[soap.zone]]></dc:creator>
		<pubDate>Mon, 12 Aug 2024 16:28:04 +0000</pubDate>
				<category><![CDATA[Без рубрики]]></category>
		<guid isPermaLink="false">https://soap.zone/?p=1769</guid>

					<description><![CDATA[Имеем несколько вариантов замены и удаления. Для замены используем код в functions.php: Здесь мы удалим часть футера function replace_opstore_footer_credit() { remove_action('opstore_footer', 'opstore_bottom_footer', 10); add_action('opstore_footer', 'custom_footer_credit', 10); } function custom_footer_credit() { ?> © 2024 Ваше Имя или Название Компании. Все права защищены.]]></description>
										<content:encoded><![CDATA[<p>Имеем несколько вариантов замены и удаления. Для замены используем код в  functions.php:<br />
Здесь мы удалим часть футера</p>
<pre>
function replace_opstore_footer_credit() {
    remove_action('opstore_footer', 'opstore_bottom_footer', 10);

    add_action('opstore_footer', 'custom_footer_credit', 10);
}

function custom_footer_credit() {
    ?>
    <div class="footer-custom">
        <p>© 2024 Ваше Имя или Название Компании. Все права защищены.</p>
    </div>
    <?php
}

add_action('wp_loaded', 'replace_opstore_footer_credit');

<pre>
Здесь замена подписи
<pre>
function modify_opstore_footer_credit($content) {
    // Ищем стандартную подпись по содержимому
     $pattern = '/Copyright 2024 - Opstore Theme By <a href="https:\/\/wpoperation\.com\/">WPoperation<\/a>/';

    // Формируем новую подпись
    $replacement = '© 2024 Ваше Имя или Название Компании. Все права защищены.';

    // Заменяем стандартную подпись на новую
    $content = preg_replace($pattern, $replacement, $content);

    return $content;
}

function start_output_buffer() {
    ob_start('modify_opstore_footer_credit');
}

function end_output_buffer() {
    ob_end_flush();
}

add_action('template_redirect', 'start_output_buffer');
add_action('shutdown', 'end_output_buffer');

</pre>
<p>или не зная разметки </p>
<pre>
function modify_opstore_footer_credit($content) {
    // Убираем стандартную подпись
    $content = preg_replace('/Opstore Theme By <a href="https:\/\/wpoperation\.com\/">.*?<\/a>/', '', $content);
    
    // Добавляем свою подпись
    $new_credit = '<p>© 2024 Ваше Имя или Название Компании. Все права защищены.</p>';

    // Вставляем новую подпись вместо старой
    return $content . $new_credit;
}

function start_output_buffer() {
    ob_start('modify_opstore_footer_credit');
}

function end_output_buffer() {
    ob_end_flush();
}

add_action('template_redirect', 'start_output_buffer');
add_action('shutdown', 'end_output_buffer');

</pre>
<p>или по классам </p>
<pre>
function modify_opstore_footer_credit($content) {
    // Ищем стандартную подпись
    $pattern = '/<div class="col-md-6 col-sm-6 col-xs-12">.*?<\/div>/s';

    // Формируем новую подпись
    $replacement = '<div class="col-md-6 col-sm-6 col-xs-12">© 2024 Ваше Имя или Название Компании. Все права защищены.</div>';

    // Заменяем старую подпись на новую
    $content = preg_replace($pattern, $replacement, $content);

    return $content;
}

function start_output_buffer() {
    ob_start('modify_opstore_footer_credit');
}

function end_output_buffer() {
    ob_end_flush();
}

add_action('template_redirect', 'start_output_buffer');
add_action('shutdown', 'end_output_buffer');

</pre>
]]></content:encoded>
					
					<wfw:commentRss>https://soap.zone/2024/08/12/%d0%b7%d0%b0%d0%bc%d0%b5%d0%bd%d0%b0-%d1%84%d1%83%d1%82%d0%b5%d1%80%d0%b0/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Import Export</title>
		<link>https://soap.zone/2024/08/12/import-export/</link>
					<comments>https://soap.zone/2024/08/12/import-export/#respond</comments>
		
		<dc:creator><![CDATA[soap.zone]]></dc:creator>
		<pubDate>Sun, 11 Aug 2024 21:42:34 +0000</pubDate>
				<category><![CDATA[Без рубрики]]></category>
		<guid isPermaLink="false">https://soap.zone/?p=1761</guid>

					<description><![CDATA[WP All ImportАвтор: SoflyyСсылка: https:// wordress.org/plugins/wp-all-import/ WooCommerce Product CSV Import SuiteАвтор: WooCommerceСсылка: https:// woocommerce.com/products/product-csv-import-suite/ Product Import Export for WooCommerceАвтор: WebToffeeСсылка: https:// wordpress.org/plugins/product-import-export-for-woo/ Woo Import ExportАвтор: VJInfotechСсылка: https:// codecanyon.net/item/woo-import-export/13694764 CTX Feed – WooCommerce Product Feed GeneratorАвтор: WebAppickСсылка: https:// wordpress.org/plugins/webappick-product-feed-for-woocommerce/ WooCommerce Add-On for WP All ImportАвтор: SoflyyСсылка: https:// www.wpallimport.com/woocommerce-product-import/ Auto Upload ImagesАвтор: Ali IraniСсылка: https:// wordpress.org/plugins/auto-upload-images/]]></description>
										<content:encoded><![CDATA[
<p><strong>WP All Import</strong><br><strong>Автор:</strong> Soflyy<br>Ссылка: <code>https:// wordress.org/plugins/wp-all-import/</code></p>



<p><strong>WooCommerce Product CSV Import Suite</strong><br><strong>Автор:</strong> WooCommerce<br>Ссылка: <code>https:// woocommerce.com/products/product-csv-import-suite/</code></p>



<p><strong>Product Import Export for WooCommerce</strong><br><strong>Автор:</strong> WebToffee<br>Ссылка: <code>https:// wordpress.org/plugins/product-import-export-for-woo/</code></p>



<p><strong>Woo Import Export</strong><br><strong>Автор:</strong> VJInfotech<br>Ссылка: <code>https:// codecanyon.net/item/woo-import-export/13694764</code></p>



<p><strong>CTX Feed – WooCommerce Product Feed Generator</strong><br><strong>Автор:</strong> WebAppick<br>Ссылка: <code>https:// wordpress.org/plugins/webappick-product-feed-for-woocommerce/</code></p>



<p><strong>WooCommerce Add-On for WP All Import</strong><br><strong>Автор:</strong> Soflyy<br>Ссылка: <code>https:// www.wpallimport.com/woocommerce-product-import/</code></p>



<p><strong>Auto Upload Images</strong><br><strong>Автор:</strong> Ali Irani<br>Ссылка: <code>https:// wordpress.org/plugins/auto-upload-images/</code></p>
]]></content:encoded>
					
					<wfw:commentRss>https://soap.zone/2024/08/12/import-export/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
