WordPress의 최신 편집자에 대해 알아야 할 모든 구텐베르크

구텐베르크는 WordPress의 새로운 에디터입니다. 현재의 TinyMCE 기반 에디터 대체하기. 논란의 여지가 있지만 WordPress를 여러 가지 방법으로 바꾸고 일반 사용자와 개발자, 특히 WordPress에서 작업하기 위해 편집기 화면에 의존하는 개발자 모두에게 영향을주는 야심 찬 프로젝트입니다. 보이는 방법은 다음과 같습니다..

Gutenberg는 WordPress의 새로운 패러다임을 소개합니다. “블록”.

“블록” 설명하는 데 사용되는 추상 용어입니다. 마크 업 단위 웹 페이지의 콘텐츠 또는 레이아웃으로 구성됩니다. 이 아이디어는 오늘날 WordPress에서 무엇을 달성했는지에 대한 개념을 결합합니다. 단축 코드, 사용자 정의 HTML 및 단일 일관된 API에 검색 포함 및 사용자 경험.

프로젝트 설정

Gutenberg가 React를 기반으로 구축되었다는 사실을 알고있는 일부 개발자는 장벽이 Gutenberg 개발을위한 초급 개발자에게는 너무 높습니다..

React.js를 설정하는 것은 방금 시작했을 때 시간이 많이 걸리고 혼란 스러울 수 있습니다. 코드에 따라 바벨 (Babel) 플러그인이 필요할 수도 있고 웹팩 (Webpack), 롤업 (Rollup) 또는 파셀 (Parcel)과 같은 번들러 (Bundler)가 필요할 수도 있습니다..

다행히도, WordPress 커뮤니티 내의 일부 사람들이 단계적으로 구텐베르크가 가능한 한 쉽게 개발할 수 있도록 노력하고 있습니다. 오늘, 우리는 구텐베어 상용구를 생성 할 도구를 가지고 있습니다. 우리는 즉시 코드 작성을 시작할 수 있습니다. 도구와 구성에 멍청이가되는 대신.

구텐 블록 만들기

그만큼 창작 블록 Ahmad Awais의 초기 프로젝트입니다. 그것은 제로 구성 툴 키트 (# 0CJS)를 사용하면 React, Webpack, ESNext, Babel, ESLint, Sass 등의 최신 스택을 사전 설정하여 구텐베르크 블록을 개발할 수 있습니다. 지시에 따라 Guten Block 만들기를 시작하십시오..

ES5 (ECMAScript 5) 사용

이 모든 도구를 사용하여 간단한 도구 만들기 “안녕하세요. 세계” 블록이 너무 많이 보일 수도 있습니다. 스택을 기울여두기를 원한다면 익숙한 평범한 'ECMAScript 5'를 사용하여 구텐베르크 블록을 실제로 개발할 수 있습니다. 당신이 가지고 있다면 WP-CLI 1.5.0이 컴퓨터에 설치되어 있어야합니다., 당신은 단순히 실행할 수 있습니다 ...

 wp 비계 블록  [- 제목 =] [--dashicon =<dashicon>] [- category =<category>] [- 테마] [- plugin =<plugin>] [--force]</pre> <p>... ~에 <strong>플러그인이나 테마에 대한 Gutenberg 블록 상용구를 생성하십시오.</strong>. 이 접근법은 더욱 현명합니다. 특히 구텐베르크 시대 이전에 개발 한 기존 플러그인 및 테마의 경우 더욱 그렇습니다..</p> <p>Gutenberg 블록을 수용 할 수있는 새로운 플러그인을 만드는 대신, 블록을 플러그인 또는 테마에 통합 할 수 있습니다. 이 튜토리얼을 모든 사람들이 쉽게 따라 할 수 있도록, <strong>우리는 WP-CLI와 함께 ECMAScript 5를 사용할 것입니다.</strong>.</p> <h4>새 블록 등록</h4> <p>Gutenberg는 현재 플러그인으로 개발되었으며 팀이 준비가되었다고 생각할 때마다 WordPress 5.0에 병합됩니다. 그러니 당분간은, 당신은 그것을 설치해야합니다. <strong>플러그인 페이지 <code>wp-admin</code></strong>. 설치하고 활성화 한 후에는 Windows 시스템에서 터미널이나 명령 프롬프트에서 다음 명령을 실행하십시오.</p> <pre name="code"> wp 비계 블록 시리즈 - 제목 = "HTML5 시리즈"- 테마</pre> <p>이 명령은 현재 활성화 된 테마로 블록을 생성합니다. 우리 블록은 다음 파일로 구성됩니다 :</p> <pre name="code"> . 에이¢Â ?? ?? ??¢Â ?? ?? ??¢Â ?? ?? ?? 시리즈 Ã¢Â ?? Â'ÂÂÂÂÂÂÃÃ¢Â ?? ?? ??¢Â ?? ?? ??¢Â ?? ?? ?? block.js Ã¢Â ?? Â'ÂÂÂÂÂÂÃÃ¢Â ?? ?? ??¢Â ?? ?? ??¢Â ?? ?? ?? editor.css Ã¢Â ?? Â'ÂÂÂÂÂÂÃÃ¢Â ?? ?? ??¢Â ?? ?? ??¢Â ?? ?? ?? style.css Ã¢Â ?? ?? ??¢Â ?? ?? ??¢Â ?? ?? ?? series.php </pre> <p>우리 블록의 메인 파일을 <code>functions.php</code> 우리 테마 :</p> <pre name="code"> if (function_exists ( 'register_block_type')) get_template_directory ()가 필요합니다. '/blocks/series.php';  </pre> <p>파일 로딩을 조건부로 묶습니다. 이렇게하면 <strong>구텐베르크가있을 때만로드 된 이전 워드 프레스 버전과의 호환성</strong>. 우리 블록은 구텐베르크 인터페이스에서 사용할 수 있습니다..</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_2.jpg"></figure><p>우리가 블록을 삽입 할 때 어떻게 보이는지.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_3.jpg"></figure><h3>구텐베르크 APIs</h3> <p>Gutenberg는 새로운 블록을 등록하기 위해 두 세트의 API를 도입했습니다. 우리가 <code>series.php</code>, 새로운 블록을 등록하는 다음 코드를 찾을 것입니다. 또한 <strong>프론트 엔드와 편집기에서 스타일 시트와 자바 스크립트를로드합니다.</strong>.</p> <pre name="code">register_block_type ( 'twentyseventeen / series', array ( 'editor_script'=> '시리즈 블록 편집기', 'editor_style'=> '시리즈 블록 편집기', 'style'=> 'series-block')));</pre> <p>우리가 위에서 볼 수 있듯이, 우리의 블록은 <code>스물셋 / 시리즈</code>, 블록 이름은 고유해야하며 다른 플러그인에 의해 가져온 다른 블록과의 충돌을 피하기 위해 이름 공간을 가져야합니다.</p> <p>더욱이, <strong>Gutenberg는 새로운 JavaScript API 세트를 제공합니다. “블록” 인터페이스</strong> 편집기에서 API가 꽤 풍부하기 때문에, 우리는 당신이 단순하지만 기능적으로 구텐베르그 블록을 얻는 것을 알아야한다고 생각하는 몇 가지 특성들에 초점을 맞출 것입니다..</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>먼저, 우리는 <code>wp.blocks.registerBlockType</code>. 이 함수는 <strong>새로운 것을 등록하십시오. “블록” 구텐베르크 편집장에게</strong>. 그것은 두 가지 주장을 요구한다. 첫 번째 인수는 이름에 등록 된 블록 이름입니다. <code>register_block_type</code> PHP 측의 함수. 두 번째 인수는 <strong>블록 속성을 정의하는 객체</strong> 제목, 카테고리 및 Block 인터페이스를 렌더링하는 두 가지 함수와 같은 함수.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType; registerBlockType ( 'twentyseventeen / series', title : __ ( 'HTML5 Series'), 카테고리 : '위젯', 키워드 : [ 'html'], 편집 : function (props) , save : function (props)  ); </pre> <h4><code>wp.element.createElement</code></h4> <p>이 함수를 사용하면 “블록” 게시물 편집기에서 그만큼 <code>wp.element.createElement</code> 함수는 기본적으로 React의 추상화이다. <code>createElement ()</code> 함수를 사용하므로 동일한 인수 세트를 허용합니다. 첫 번째 인수는 요소의 유형, 예를 들어 단락을 취합니다. <code>스팬</code>, 또는 <code>div</code> 아래 그림과 같이:</p> <pre name="code">wp.element.createElement ( 'div');</pre> <p>우리는 할 수있다. <strong>함수를 변수로 앨리어스 (alias)한다.</strong> 그래서 쓰는 것이 더 짧습니다. 예 :</p> <pre name="code"> var el = wp.element.createElement; 엘 ( 'div');</pre> <p>만약 너라면 <strong>새로운 ES6 구문 사용을 선호합니다.</strong>, 당신은 또한 이렇게 할 수 있습니다 :</p> <pre name="code"> const createElement : el = wp.element; 엘 ( 'div');</pre> <p>우리는 또한 할 수있다. <strong>요소 속성 추가</strong> ~와 같은 <code>수업</code> 이름 또는 <code>신분증</code> 두 번째 매개 변수는 다음과 같습니다.</p> <pre name="code"> var el = wp.element.createElement; el ( 'div',  'class': 'series-html5', 'id': '시리즈 -html-post-id-001');</pre> <p>그만큼 <code>div</code> 우리가 만든 내용은 내용이 없으면 이해가되지 않을 것입니다. 우리는 할 수있다. <strong>세 번째 매개 변수의 인수에 내용 추가</strong>:</p> <pre name="code"> var el = wp.element.createElement; 이 기사는 "HTML5 / CSS3 Tutorials series"의 일부인 - el ( 'p', 'class': 'series-html5', 'id': 'series-html-post-id-001' 더 나은 디자이너 및 / 또는 개발자가 될 수 있도록 도와주세요. 같은 시리즈의 다른 기사를 보려면 여기를 클릭하십시오. ');</pre> <h4><code>wp.components</code></h4> <p>그만큼 <code>wp.components</code> 이름에서 알 수 있듯이 구텐베르크 구성 요소 모음을 포함합니다. 이러한 구성 요소는 기술적으로 Button, Popover, Spinner, Tooltip 및 기타 여러 가지를 포함하는 React 사용자 지정 구성 요소입니다. 우리는 할 수있다. <strong>이 구성 요소를 우리 자신의 블록으로 재사용하십시오.</strong>. 다음 예제에서는 버튼 구성 요소.</p> <pre name="code"> var Button = wp.components.Button; 엘 (버튼,  '클래스': '다운로드 버튼',, '다운로드');</pre> <h4>속성</h4> <p>속성은 블록에 데이터를 저장하는 방법이며,이 데이터는 내용, 색상, 정렬, URL 등과 같을 수 있습니다. 우리는 전달 된 속성에서 속성을 가져올 수 있습니다. <code>편집하다()</code> 함수를 호출합니다.</p> <pre name="code"> 편집 : function (props) var content = props.attributes.seriesContent; return el ( 'div',  'class': 'series-html5', 'id': '시리즈 -html-post-id-001', 콘텐츠); </pre> <p>속성을 업데이트하기 위해 <code>setAttributes ()</code> 기능. 일반적으로 버튼을 클릭하거나 입력을 채우거나 옵션을 선택하는 등의 특정 동작에 대한 내용을 변경합니다. 다음 예제에서는 <strong>후퇴</strong> 예기치 않은 일이 발생했을 때를 대비하여 Google의 콘텐츠 <code>시리즈 내용</code> 속성.</p> <pre name="code"> 편집 : function (props) if (typeof props.attributes.seriesContent === 'undefined'||! props.attributes.seriesContent) props.setAttribute (seriesContent : 'Hello World! 다음은 대체 콘텐츠입니다.' ) var content = props.attributes.seriesContent; 반환 [el ( 'div',  'class': '시리즈 -html5', 'id': '시리즈 -html-post-id-001', 콘텐츠),];  </pre> <h4>블록 저장하기</h4> <p>그만큼 <code>구하다()</code> 기능은 <code>편집하다()</code>, 그것은 게시물 데이터베이스에 저장하기 위해 우리 블록의 내용을 정의하는 것을 제외하고는. 블록 내용을 저장하는 것은 다음과 같이 매우 간단합니다.</p> <pre name="code"> save : function (props) if (! props ||! props.attributes.seriesContent) return;  var content = props.attributes.seriesContent; 반환 [el ( 'div',  'class': '시리즈 -html5', 'id': '시리즈 -html-post-id-001', 콘텐츠),];  </pre> <h3>무엇 향후 계획?</h3> <p>구텐베르크 (Gutenberg)는 WordPress 생태계를 더 좋게 (또는 더 나쁜 경우) 바꿀 것입니다. 개발자는 <strong>WordPress 플러그인과 테마를 개발하는 새로운 방법을 채택하십시오.</strong>. 구텐베르크는 시작일뿐입니다. 곧 “블록” 패러다임은 설정 API 및 위젯과 같은 WordPress의 다른 영역으로 확장 될 것입니다.</p> <p>JavaScript를 깊이 배우십시오. Gutenberg에 들어가서 WordPress 업계에서 미래와 관련이있는 유일한 방법입니다. JavaScript 기본, 기능, 기능, 도구, 상품 및 악성에 대해 이미 잘 알고 있다면 구텐베르그 (Gutenberg)와 함께 할 수있을 것이라고 확신합니다..</p> <p>언급했듯이 Gutenberg는 블록에 거의 모든 것을 수행 할 수있는 풍부한 API를 제공합니다. 다음 중 선택할 수 있습니다. <strong>평범한 구식 JavaScript, ES6 구문, React 또는 Vue가있는 JavaScript로 블록을 코딩하십시오.</strong>.</p> <h4>아이디어와 영감</h4> <p>Github 계정의 저장소에서 찾을 수있는 아주 (아주) 간단한 Gutenberg Block을 만들었습니다. 또한, 더 복잡한 블록을 구축 할 때 영감을 불러 일으킬 수있는 여러 저장소를 정리했습니다..</p> <ul><li>Gutenblocks - Mathieu Viet가 ES5 구문을 사용하여 JavaScript로 작성한 블록 모음</li> <li>Jetpack Gutenblocks Project - Jetpack에 번들로 묶인 블록 컬렉션</li> <li>Vue.js를 포함한 구텐베르크 구현 예제 목록</li> </ul><h3>추가 참조</h3> <ul><li>구텐베르크 공식 저장소</li> <li>구텐베르크 핸드북</li> </ul>


			<div class="rek-block">
				<center>
						<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-6284591903398394"
     data-ad-slot="6432271471"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
				</center>
			</div>

		</div>
	</div>

	<div class="col-md-4">
<div class="bar">

    <div class="rek-block">
        <center>
                <ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-6284591903398394"
     data-ad-slot="6432271471"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
        </center>
    </div>

    
    <div class="barpost">
            <div class="bar-post-img"><a href="/articles/howto/hack-an-ikea-lack-table-into-a-component-rack.html"><img src="//savtec.org/img/images_8/hack-an-ikea-lack-table-into-a-component-rack_2.jpg" alt=""></a></div>
            <div class="bar-post-h1"> <a href="/articles/howto/hack-an-ikea-lack-table-into-a-component-rack.html">IKEA Lack Table을 Hack하여 컴포넌트 랙에 넣기</a> </div>
    </div>
    

    
    <div class="barpost">
            <div class="bar-post-img"><a href="/articles/howto/hack-apart-an-old-keyboard-to-create-custom-control-interface.html"><img src="//savtec.org/img/images_8/hack-apart-an-old-keyboard-to-create-custom-control-interface_2.jpg" alt=""></a></div>
            <div class="bar-post-h1"> <a href="/articles/howto/hack-apart-an-old-keyboard-to-create-custom-control-interface.html">이전 키보드를 해킹하여 사용자 정의 컨트롤 인터페이스 만들기</a> </div>
    </div>
    

    
    <div class="barpost">
            <div class="bar-post-img"><a href="/articles/windows/guide-to-windows-10-task-manager-part-ii.html"><img src="//savtec.org/img/images/guide-to-windows-10-task-manager-part-ii_2.png" alt=""></a></div>
            <div class="bar-post-h1"> <a href="/articles/windows/guide-to-windows-10-task-manager-part-ii.html">Windows 10 작업 관리자 가이드 - 2 부</a> </div>
    </div>
    
        

</div>
	</div>

</div>
</div>

<div class="prevnext">
<div class="container">
<div class="row">

		<div class="col-md-6">
			
				<div class="post">
                        <div class="prevnext-title">다음 기사</div>
					<div class="post-img"><a href="/articles/howto/hack-a-10-flashlight-into-an-ultra-bright-premium-one.html">

						
						<img src="//savtec.org/img/images_9/hack-a-10-flashlight-into-an-ultra-bright-premium-one_2.jpg" alt="">
						
					
					</a></div>
					<div class="post-h1"> <a href="/articles/howto/hack-a-10-flashlight-into-an-ultra-bright-premium-one.html">매우 밝은 프리미엄 원에 $ 10 손전등 해킹</a> </div>
				</div>
			
			</div>


			<div class="col-md-6">
				
					<div class="post">
                            <div class="prevnext-title">이전 기사</div>
						<div class="post-img"><a href="/articles/windows/guide-to-windows-10-task-manager-part-iii.html">
							
								
								<img src="//savtec.org/img/images/guide-to-windows-10-task-manager-part-iii.png" alt="">
								
						
						</a></div>
						<div class="post-h1"> <a href="/articles/windows/guide-to-windows-10-task-manager-part-iii.html">Windows 10 작업 관리자 가이드 - 3 부</a> </div>
					</div>
				
				</div>

</div>
</div>
</div>


<footer>
	<div class="container">
    <div class="langs-block">
      <ul class="langs-list">
        <li class="site-lang"><a href="https://www.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-TH"></i></a></li>  
          <li class="site-lang"><a href="https://de.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-DE"></i></a></li>
          <li class="site-lang"><a href="https://ar.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-AE"></i></a></li>
          <li class="site-lang"><a href="https://bg.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-BG"></i></a></li>
          <li class="site-lang"><a href="https://cs.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-CZ"></i></a></li>
          <li class="site-lang"><a href="https://da.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-DK"></i></a></li>          
          <li class="site-lang"><a href="https://el.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-GR"></i></a></li>
          <li class="site-lang"><a href="https://es.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-ES"></i></a></li>
          <li class="site-lang"><a href="https://et.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-EE"></i></a></li>
          <li class="site-lang"><a href="https://fi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-FI"></i></a></li>
          <li class="site-lang"><a href="https://fr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-FR"></i></a></li>
          <li class="site-lang"><a href="https://he.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IL"></i></a></li>
          <li class="site-lang"><a href="https://hi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IN"></i></a></li>
          <li class="site-lang"><a href="https://hr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-HR"></i></a></li>
          <li class="site-lang"><a href="https://hu.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-HU"></i></a></li>
          <li class="site-lang"><a href="https://id.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-ID"></i></a></li>
          <li class="site-lang"><a href="https://it.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IT"></i></a></li>
          <li class="site-lang"><a href="https://ja.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-JP"></i></a></li>
          <li class="site-lang"><a href="https://ko.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-KR"></i></a></li>
          <li class="site-lang"><a href="https://lt.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-LT"></i></a></li>
          <li class="site-lang"><a href="https://lv.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-LV"></i></a></li>
          <li class="site-lang"><a href="https://ms.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-MY"></i></a></li>
          <li class="site-lang"><a href="https://nl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-NL"></i></a></li>
          <li class="site-lang"><a href="https://no.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-NO"></i></a></li>
          <li class="site-lang"><a href="https://pl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-PL"></i></a></li>
          <li class="site-lang"><a href="https://pt.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-PT"></i></a></li>
          <li class="site-lang"><a href="https://ro.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RO"></i></a></li>
          <li class="site-lang"><a href="https://ru.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RU"></i></a></li>
          <li class="site-lang"><a href="https://sk.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SK"></i></a></li>
          <li class="site-lang"><a href="https://sl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SI"></i></a></li>
          <li class="site-lang"><a href="https://sr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RS"></i></a></li>
          <li class="site-lang"><a href="https://sv.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SE"></i></a></li>        
          <li class="site-lang"><a href="https://tr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-TR"></i></a></li>
          <li class="site-lang"><a href="https://ua.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-UA"></i></a></li>
          <li class="site-lang"><a href="https://vi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-VN"></i></a></li>          

      </ul>
    </div>
	<div class="row align-items-center">
		<div class="col-md-3">
			© <script>
                    var currentTime = new Date();
                    var year = currentTime.getFullYear();

                    document.write(year);
            </script> <a href="/">Savtec</a>
		</div>

		<div class="col-md-9">
			유용한 정보 및 웹 개발 팁. 프로그래밍, 웹 디자인, CSS, HTML, JAVASCRIPT. WINDOWS를 구성하고 다시 설치하십시오. 처음부터 사이트 및 응용 프로그램 만들기
		</div>
	</div>
 </div>
</footer>

<link rel="stylesheet" href="css/flags.css">

<script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>
<script>
        SimpleJekyllSearch({
          searchInput: document.getElementById('search-input'),
          resultsContainer: document.getElementById('results-container'),
          json: '/search.json',
          searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
        })
</script>

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
  "palette": {
    "popup": {
      "background": "#edeff5",
      "text": "#838391"
    },
    "button": {
      "background": "#4b81e8"
    }
  },
  "theme": "classic",
  "position": "bottom-right"
})});
</script>

</body>
</html>