WordPress Plugins Install Guide | How To Activate Under Construction Mode |

플러그인은 응용 프로그램에 추가 기능을 제공하는 유틸리티입니다 플러그인을 설치하려면 플러그인을 설치하기 만하면됩니다

wp-content / plugins 디렉토리에 플러그인 파일 플러그인이 설치되면 플러그인 메뉴에서 해당 플러그인을 활성화하거나 비활성화 할 수 있습니다 WP 관리에서 WordPress 27 이상에서는에서 직접 플러그인을 설치할 수 있습니다 관리 영역

플러그인 다운로드 귀하의 WP 관리자 영역에 로그인하고 플러그인 – 새로 추가로 이동하십시오 플러그인 아카이브로 이동하여 선택하십시오 그런 다음 Install Now (지금 설치) 및 Plugin (플러그인)을 클릭하십시오 될거야 곧 설치됩니다 제거는 또한이다 대부분의 경우 직설적이다

플러그인에서 디렉토리를 제거하기 만하면됩니다 제거하고 싶으면 자동으로 비활성화됩니다 항상 모든 플러그인이 아니라는 것을 명심하십시오 설치가 쉽기 때문에 항상 해당 설명서를 참조하십시오 설치 지침을 먼저 읽으십시오

처럼 & 이 비디오를 공유하십시오 : https://youtube/O-wWZJ5laLg 내 채널을 구독하십시오

DIY WP #33 Section Preview

안녕하세요 이번 시간에는 프론트 페이지 html 하드 코딩을 할 것입니다

프런트 페이지는 어떤 웹사이트에 접속했을 때 처음 보는 페이지이고 메인페이지라고도 합니다 워드프레스에서는 전면 페이지라고 합니다 웹사이트의 대표적인 얼굴이라고 이해하시면 되겠습니다 이번 강좌부터 몇 개의 동영상에서는 워드프레스 프런트페이지 코딩 전에 html로 하드코딩을 하게 될 것입니다 그리고 다시 워드프레스 php로 변환시키는 과정으로 진행하려고 합니다

일단 이 강좌를 진행하기 이전에 html 코딩을 먼저 해 보았구요 그 완성된 페이지 모습은 다음과 같습니다 텍스트와 이미지는 더미 텍스트와 더미 이미지를 썼습니다 오른쪽에 카로우젤 슬라이드, 그 밑에 페이지 아이템 박스들이 있습니다 왼쪽에는 로고이미지, 그 밑에 토글 버튼 박스와 인포메이션 박스가 있습니다

이 토글 버튼 박스에 버튼을 클릭하면, 웹페이지 위에서 collapse 박스가 나타납니다 회사의 이념이라든지 간단한 설명들이 보이면 좋을 것 같고, 그 밑에 예약 박스, 그 밑에 소셜 네트워크 박스가 있습니다 하단에는 회사의 구글 지도를 만들 겁니다 또한 네비게이션 메뉴바도 만들어 이제 좀더 홈페이지 같이 만들어 볼 것입니다 네비게이션 메뉴 중에 콘택트라는 메뉴를 클릭하면 모달창이 나타나 관리자에게 메일을 보낼 수 있도록 할 것입니다

요즘 홈페이지는 pc보다도 모바일에서 훨씬 더 많이 검색이 이루어지고 있어서 모바일 반응형 웹사이트를 만들 것입니다 특히 프런트페이지는 pc와 다른 디자인으로 이렇게 모바일에서 보이게 코딩할 겁니다 그래서 우선 이 정도로 프런트 페이지 프리뷰를 보여 드리고 있는데, 다음 강의부터 하드 코딩 html 코딩을 먼저 할 것입니다 이 과정에 부트스트랩 클래스에 대한 이해가 좀 더 깊어질 것이라고 생각합니다 네

본격적인 코딩은 다음 동영상부터 시작할 것이구요, 재밌게 코딩 공부를 함께 하기를 기대합니다 네 다음 시간에 뵙겠습니다

DIY WP #34 Front Page Static Coding Part1 : Navbar & Modal

자 이제부터 프런트 페이지 하드 코딩을 하겠습니다 우선 codin diy 테마 폴더에서 새파일을 클릭하고, 이름은 front-page

php를 만듭니다 워드프레스에서 프런트-페이지 이름이 되겠습니다 그 다음 프런트 페이지를 진행하기에 앞서 header 부분을 넣어 줍니다 headerphp에 네비게이션이 있는데, 조금 수정하도록 할께요

네비게이션 모습을 보시면 이렇습니다 네브바, home, features, pricing, dropdown link 등 이 드롭다운 링크를 클릭하면 드롭다운 서브메뉴가 보이죠 부트스트랩 네브바 컴포넌트를 복사해서 붙인 모습입니다 이제 이 메뉴를 고칠텐데요, 다시 텍스트 에디터로 가서, 상단의 navbar 부분 에서 bg-light는 네브바의 색상을 표시하는 부트스트랩 클래스입니다

아주 밝은 회색이죠 이 색을 bg-primary로, 또 navbar-light 대신 navbar-dark라고 고칩니다 그리고 브라우저에서 스크롤하면 네비게이션이 위로 사라지죠 스크롤다운하더라도 네비게이션이 상단에 딱 붙어있는 모습으로 하고 싶은데, 이 때는 sticky-top이라는 클래스를 씁니다 이것은 부트스트랩의 포지션이라는 페이지에 있는 클래스입니다

이대로만 쓰시면 됩니다 이 아래에 마진 바텀으로 4스페이싱 정도의 여백을 두겠습니다 다음 이 아래 navbar brand는 지금 이 홈페이지의 회사나 업체 이름에 해당하는데, 여기에는 로고 이미지도 들어갈 수 있습니다 그래서 엔터를 두번 치고, 이지를 넣어주겠습니다 img 태그에 클래스는 둥근 모서리의 rounded-circle, 그리고 반응형 이미지로 img-fluid, 이미지에 그림자 효과를 두게 img-raised, 이건 부트스트랩 클래스는 아니고, 별도로 css 지정을 해 줄 겁니다

그리고 탭키 src에는 더미이미지로 http viaplaceholdercom 에 사이즈는 40×40으로 합니다 그리고 물음표 text 이퀄 Logo라고 적어봅니다

이미지에 logo라는 글자가 보일 겁니다 이 로고이미지는 가로 40픽셀, 세로 40픽셀인데요, 닫히는 태그 부분에 width로 40픽셀, height 40픽셀이라고 적어줍니다 이미지 태그 밑에 span이라는 태그를 만들고, 이 span 태그 사이에 Navbar를 넣겠습니다 이름은 이제 navbar 대신에 our company라고 하겠습니다 span에 클래스로 ml-2로 넣겠습니다

일단 여기까지 하고 세이브를 눌러주세요 브라우저에서 리프레쉬를 하면 네브바 색이 푸른색으로 바뀌었고, 더미이미지이지만 로고 이미지가 생겼고, 브랜드 네임이 생겼습니다 아까보다는 좀 더 좋아졌네요 이번에는 메뉴 아이템들이 좌측에 있는 것을 로고 이미지만 남기고, 오른쪽에 위치하게 할 겁니다 텍스트 에디어로 가서, ul에 클래스를 ml-auto라고 추가해주세요

마진 레프트를 자동으로 한다는 뜻인데, 이르면 좌측 아이템과 떨어지게 됩니다 세이브 브라우저에서 리프레쉬하면 이제 메뉴 아이템이 우측으로 갑니다 또 로고이미지와 메뉴 아이템이 메뉴바의 폭을 완전히 넓게 차지하고 있는데요, 이게 좋으시면 이대로 하셔도 됩니다만, 저는 안쪽으로 모이게 할 생각입니다 그러려면, nav 태그 밑에 div 클래스로 container를 넣어줍니다

그리고 이 사이에 a 태그 밑에서 드래그해서, nav 태그 위의 닫히는 div 태그까지를 지정해서 cut한 다음 이 속으로 붙여넣기를 해주세요 줄 정리를 해주시구요, 여긴 닫히는 container, 그 밑에는 닫히는 nav라고 주석 표시하죠 세이브하고, 브라우저에서 리프레쉬하면 로고와 메뉴 아이템들이 조금 가운데로 모였습니다 현재는 메뉴 아이템이 4개인데, 혹시 앞으로 더 많아져서 지금의 폭에 맞지 않는다면, 아까 넓은 폭으로 네브바를 써야 할 겁니다 그 다음 좀 전 ml-auto라는 부트스트랩 클래스에 대해 부트스트랩 페이지를 보죠

여기 spacing 페이지를 보시면, responsive한 마진과 패딩을 만들어주는 클래스라고 설명하고 있습니다 지금 여기 보시면 m이라고 하는 것은 마진을 의미하고, p라고 하는것은 패딩 그 밑에 t, b, l, r, x, y 등은 side를 의미하는데요, t는 탑, b는 바텀, l은 레프트, r은 라이트, x는 가로, y는 세로, 아무것도 없으면 4방향 모두입니다 사이즈는 0에서5까지, auto는 자동 입니다 그래서 좀전 로고 이름과 이미지 사이에 ml-2라고 한 것은 왼쪽으로 2스페이싱만큼 마진을 둔다는 뜻이 됩니다 또 밑에 ml-auto는 왼쪽 바깥 여백을 auto로 하겠다는 것입니다

auto로 하면 여기 로고와 home의 간격이 반응적으로 떨어지면서 양쪽에 맞게 위치하게 됩니다 자, 다음은 메뉴의 아이템을 수정합니다 home은 그대로 두고, 두번째는 Intro라고 하구요 세번째는 page라고 하겠습니다 네번째는 blog인데, 위의 페이지와 블로그의 순서를 바꾸죠 좀전 page라고 한것을 blog라고 하고, 여기 드롭다운 링크를 페이지로 고칩니다

밑의 하위 메뉴에는 페이지 아이템 1, 2, 3로 고쳐봅니다 세이브하고, 브라우저에서 리프레쉬를 하면, 이렇게 변화됩니다 page를 클릭하면 드롭다운으로 서브페이지가 보입니다 잘 되었습니다 다음 page 메뉴 다음에는 예약 메뉴를 넣겠습니다

여기에 li 클래스로 nav-item 그리고 탭키를 누릅니다 그 밑에는 a태그로 클래스 nav-link 탭키 href에는 그냥 해시태그로 하죠 메뉴 이름에는 reservatioin으로 적습니다 그 밑에 또 메뉴 아이템이 들어가는데, 그냥 이 예약 메뉴 li 부분을 복사해서 붙여넣기 합니다

메뉴 타이틀만 reservation 대신 contact라고 하고 저장 브라우저에서 리프레쉬합니다 그럼 새 아이템 2개가 생긴 것을 볼 수 있습니다이 컨택트 메뉴를 클릭하면 모달이라고 해서 팝업창이 내려와서, 설명글이나 메일 폼을 넣을 겁니다 모발은 부트스트랩, 컴포넌트에, 모달이라는 섹션이 있습니다

들어가보시죠 버튼을 클릭하면 이렇게 주위는 어두워지면, 팝업창 같이 나타나게 됩니다 이런 것을 modal이라고 하는데, 이 컴포넌트를 만들어볼 겁니다 쉽습니다 button 태그나 a태그를 써서 트리거 버튼을 만들구요, 그 속에 이 data-toggle과 data-target 속성을 붙여주면 됩니다

이런 것들을 속성 또는 attribute라고 하는데요, 이 것들이 중요합니다 다시 텍스트에디터로 갑니다 contact의 a태그 뒷 부분에 data-toggle은 modal, data-target에는 #마크하고, modal-contact 라고 적어줍니다 이름은 자유롭게 해도 되는데, 이게 컨택트 트리거이니까, 아이디에 modal-contact라고 했습니다

네 잘 되었습니다 이제는 모달의 컨텐츠를 만들 차례입니다 위치는 닫히는 nav 메뉴 밑에 만들겠습니다 주석으로 modal contact라고 해주시구요

닫히는 주석도 하나 달아 주겠습니다 부트스트랩 페이지에 모달 컨텐트를 복사해서 붙여넣기 합니다 그리고 reindent, 줄 정리를 해 줍니다 세이브하구요 여기 아이디로 modal-contact라고 고쳐 주세요

세이브하구요 브라우저로 가서, 리프레쉬하고, 컨택트 메뉴를 누르면 이렇게 모달이 내려옵니다 작동은 제대로 잘 되네요 다시 텍스트 에디터로 갑니다 좀 코드 편집을 해야 겠네요

우선 모달창의 크기를 좀 더 크게 하겠습니다 div에 클래스 modal-dialog 뒤에 modal-lg를 추가해주세요 이건 부트스트랩 페이지를 보면, Optional size에서 라지 사이즈가 되게 해줍니다 그리고 옆의 버튼은 스몰 사이즈가 됩니다 라지 사이즈로 하고 싶으면, modal-lg라고 해준다고 합니다

여기에 header 부분은 지금 여기 Modal title이라는 이 부분이구요, 주로 여기에는 모달의 타이틀이 들어가면 되겠습니다 여기에는 아이콘을 하나 넣습니다 i 태그에 fa fa-pencil-square-o라고 하고 탭키 닫히는 i 태그 다음에 스페이스 한 칸 띄우고, 제목에는 contact us!라고 해줍니다 이제

으로 되어 있는 모달 바디에 내용이 들어가는데, 테스트로 lorem 100개의 단어를 넣어봅니다 그 다음 세이브하고, 브라우저로 가서, contact를 누르면 모달 사이즈가 커졌고, 제목과 아이콘, X 마크 생겼고, 바디에는 더미 텍스트도 잘 위치하는 것을 볼 수 있습니다 잘 되었네요

이제 그러면 이 바디 부분에 메일을 보낼 수 있는 input form을 작성해보겠습니다 이 더미텍스트는 지웁니다 우선 짧은 설명글로, p 태그에 클래스로 lead text-center를 넣고, We like to receive a mail이라고 넣어봅니다 그 다음 엔터, br 태그 넣고, 메일폼을 넣으려면, form이라는 태그를 넣습니다 action은 지웁니다

이 사이에 폼양식을 넣는데요 부트스트랩에 input 페이지로 가면, 여러 가지 폼 양식을 제공해 줍니다 메일 폼, 패스워드 폼, 그리고 submit 버튼 등의 예제들이 있습니다 이것들을 그대로 써주시면 되는데요, 클래스로 form-control을 주로 씁니다 div에 클래스로 row 탭키를 눌러주세요

그 밑에 div에 클래스로 col-md-4, 미디엄 사이즈에서 4개의 컬럼을 하나의 단으로 쓰는 클래스입니다 그 밑에 div에 클래스 form-group 탭, 다음에는 input 클래스로는 form-control, 아이디로는 formInput1 탭키를 눌러주세요 타입은 텍스트, id는 넘어가고, 마지막에 placeholder로 Your Name이라고 해줍니다 그 밑에 이메일 폼을 넣을텐데, 이 col-md-4 div를 복사해서 3번 붙여넣기합니다 두번째의 타입에는 email, 아이디에는 2라고 고치구요, placeholder에는 name 대신 email로 고칩니다

3번째에는 텍스트 그대로, id에는 3, placeholder에는 subject라고 해주세요 그 밑줄에 엔터 그리고 클립보드에 복사된 것을 한번 더 붙여넣기하고, col-md-12로 고칩니다 좀 긴 글을 적을 수 있는 textarea를 넣을텐데, input 부분은 지우고, textarea 태그에 클래스는 form-control, 아이디는 formInput4로 하고 탭키를 누릅니다 여기 rows엔 텍스트에어리어 높이인데, 8정도 하겠습니다

cols는 별의미가 없으니까 삭제하시고, plceholder에는 Your message라고 해줍니다 그 아래에 submit 버튼을 넣을텐데요, div 클래스로 col-md-2, 탭키를 누릅니다 클래스로는 btn btn-danger 크기는 btn-lg btn-fill, 버튼 안에 색상이 차 있는 클래스입니다 탭키 내용은 submit이라고 합니다

여기에 row라고 하는 주석 표시해주시구요 이 밑에, 메일 말고 또 다른 방법으로 연락할 수 있는 내용으로 div 클래스로 text-center my-3 탭을 누릅니다 p 태그에 클래스 lead 탭 내용은 OR

밑에 또 p 태그, 탭키를 누르고, 내용으로 이렇게 입력하고, 아이콘으로 fa fa-phone-square 탭을 눌러주세요 전화번호로 02-111-111이라고 적습니다 일단 그냥 임의로 적었습니다 풋터부분에는 close와 save 버튼이 있는데, save 버튼은 삭제합니다 close 색상도 secondary 대신 success, 녹색으로 바꿉니다

나머지는 그대로 세이브합니다 브라우저로 가서, 리프레쉬합니다 컨택트를 클릭하면, 네 이런 모습의 모달창이 나타납니다

여기 오타가 있는데요, 나중에 고칠테니 그냥 두고요, name, email, subject, message, submit, 여기 또 오타가 있네요 고쳐야겠네요 여기와 submit 수정해주겠습니다 세이브하고, 브라우저 리프레쉬합니다 다시 컨택트 메뉴를 클릭하면, 이젠 좋습니다

모달을 닫을 때는 x나 밑의 close 둘 중에 아무거나 눌러도 됩니다 지금까지의 메뉴 코딩은 나중에 acf로 바꿀 것입니다 자, 프런트 페이지의 코딩은 다음 동영상에서 계속 이어서 하겠습니다 수고하셨습니다

DIY WP #38 front-page.php : Side Section part 2

[음악] 이어서 collapse 박스 아래쪽에서부터 인포메이션 박스 코딩을 계속 하겠습니다 div 클래스로 box-item, 마진 바텀으로 mb-4

그리고 div에 이번에는 패딩 상하좌우를 각 3스페이싱을 주겠겠습니다 이 사이에 h5 텍스트의 색상은 text-warning 탭키 타이틀은 인포메이션으로 하겠습니다 div에 text-muted 탭키 p 태그에 lorem 15개의 더미 텍스트를 둡니다

그리고 이번에는 세 개의 row를 만드는데, div 클래스로 row하고 탭키를 눌러주세요 div에 col-12로 하고, flex를 이용하는데, 부트스트랩의 d-flex 방향은 flex-row, mb-1 그리고 탭을 눌러줍니다 span 탭키 누르고, 여기에 intro, 그 밑에 버튼, 버튼의 클래스는 btn btn-primary 좀 작게 btn-sm을 넣습니다 그리고 왼쪽 intro라는 버튼과의 여백을 두기 위해서 ml-auto라고 하고, 버튼 텍스트는 click이라고 하죠 세이브를 눌러주시구요, 브라우저에서 리프레쉬를 하면, 이런 모습으로 나타납니다

버튼의 이름이 안보이네요 a 와 a 사이에 클릭이, 아! 여기 들어가 버렸네요 수정하고 다시 세이브, 브라우저에서 리프레쉬하면, 이번에는 잘 됐습니다 이제는 이 div를 복사해서, 2개 붙여넣기 하는데, 두번째 버튼색은 btn-info, 세번째는 btn-warning으로 고칩니다 두번째 span에는 online으로 하고, 세번째는 notice 즉, 공지사항이라고 해보시죠

세이브하고 브라우저에서 보면 이렇게 됩니다 잘 됐죠? 예 브라우저 폭을 줄여 스마트폰 화면으로 보면 PC와 디자인이 비슷하죠 모바일에서는 다르게 보이도록 디자인을 바꾸겠습니다 어떻게 할 것인가 하면 이 밑에 스몰 디바이스에서만 보이게 따로 코딩할텐데, 먼저 구분하게 For over medium devices라고 주석을 해주시고 이 밑에는 for only small device라고 주석 표시를 합니다

이 스몰 부분에는 ul로 리스트 그룹 모양으로 만듭니다 부트스트랩에서 list-group 페이지를 보시면 이런 모습입니다 밑으로 가시면 이런 모습의 리스트 그룹도 있는데요, 좀 더 내려가서, 우리가 만들 것은 바로 이 모양입니다 이렇게 색깔이 다양하게 들어가는 모양인데, ul, li 태그로 클래스는 list-group 또는 list-group-item을 쓰면 됩니다 그래서 ul에 클래스는 list-group, 탭키를 눌러주세요 아래에 li가 들어가는데, li 대신에 a 링크로 해서 클릭하면 해당 링크 페이지로 연결되게 하면 되겠습니다 그래서 일단 a 태그를 해주시고요 href에는 #으로 하고, 이 사이에에 li 태그에 클래스로 list-group-item, 그리고 색깔은 list-group-item-primary

첫번째 리스트 색상을 첫번째 버튼색처럼 푸른색으로 하구요 li 태그 사이에는 제목으로 Intro라고 하고, 다음 span의 클래스는 pull-right, 오른쪽으로 위치하게 한다는 뜻입니다 그 다음 화살 머리의 아이콘을 넣을텐데요, 일단 & 마크하고, raquo 세미콜론이라고 적어 줍니다 entity 문자입니다 세이브 하고, 브라우저에서 리프레쉬하면 이런 모습이 보이는데요, 위의 이 3개의 버튼은 PC 즉 큰 디바이스에서만 보이게 하고, 좀전에 만든 이 리스트아이템은 모바일에서만 보이게 하고 싶어요

그래서 다시 미디움 사이즈 이상이라는 row로 가서, 클래스로 d-none, d-md-block이라고 하고, 밑에 스몰 디바이스에서만 디스플레이되는 리스트 그룹에는 d-block, d-sm-none, 즉 스몰 디바이스까지는 보이지 않게 클래스를 추가해 줍니다 세이브하고 브라우저 리프레쉬하면, 좀 전 리스트아이템은 사라지고, 이제 브라우저 폭을 줄여 스몰 디바이스처럼 해 보면, 이제 리스트 아이템만 나타나게 되었습니다 잘 됐습니다 그러면 이제 이 a 태그 부분을 카피해서, 2번 붙여넣기 하고, 두번째 제목에는 Online, 세번째에는 Notice 다음 리스트 아이템 색상도 두번째 버튼색이 info이니까, 여기도 info 세번째 것은 warning으로 고쳐 줍니다

저장하시구요 브라우져 리프레쉬하면, 네, 이렇게 되었습니다다시 큰 화면으로 보면 다시 버튼이 나타나고 또 모바일로 보면 리스트 그룹 모습으로 바뀌었습니다 마우스를 갖다 대어 보면, 포인터 모양으로 바뀌죠 모바일에 반응적입니다

네 이 부분도 잘 되었습니다 이 부분들이 인포메이션 박스였죠 그래서 여기에 인포메이션 박스 아이템이라고 주석을 표시하겠습니다 그 다음에는 예약 박스 아이템입니다 div 클래스 box-item으로 하고, 배경색은 bg-primary, 마진 바텀은 4로 합니다

이 부분은 reservation box item이라고 주석 표시합니다 이 사이에 a 태그, href에는 # 그 안에 div 클래스는 p-3 제목으로 h6, 텍스트 색상은 warning, 제목에는 reservation으로 합니다 그 밑에 텍스트 부분이 있는데, 글자 색은 text-white로 합니다

왜냐하면 이 박스의 배경이 프라이머리 , 푸른색이기 때문입니다 탭키 그 밑에 p 태그로 lorem 5개 더미텍스트를 넣습니다 그 밑에는 링크로, p태그로 클래스는 lead, text-danger 탭 내용으는 Click here으로 하고 세이브를 눌러주세요

브라우저로 가서 리플레쉬하시면, 이렇게 예약 박스가 보입니다 자~ 마지막으로 이 아래에 소셜 아이콘들을 달게 될 텐데요 박스 아이템 밑에서요 여기에서도 리스트 그룹 컴포넌트를 사용합니다 ul, 클래스로 list-group을 일단 씁니다 이 부분에도 PC와 모바일을 같이 코딩할 겁니다

지금은 PC의 리스트그룹부터 먼저 합니다 그리고 클래스 d-none, d-md-block, 탭을 눌러 주세요 li에 클래스로 list-group-item 또, list-group-item에 색상은 초록색이니까, list-group-success, 탭을 눌러주십니다 링크로 a 탭 href는 #로 적습니다

이 사이에는 아이콘을 넣죠 먼저 페이스북부터 fa fa-facebook-official 탭을 눌러주세요 그리고 닫히는 i 태그 다음 한 칸 띄우고 페이스북이라고 적습니다 세이브 하시고 브라우저를 가서 리플시를 하시면, 음 이게 초록색으로 보여야 하는데, success에 오타가 있나요? 아, group과 success 사이에 item이 빠졌네요

세이브를 눌러주시고 리프레쉬하면, 이젠 초록색의 박스가 보입니다 자 그다음 이 부분들을 카피해서 3번 붙여넣기합니다 두번째는 색상을 info, 내용은 Twitter, 아이콘도 바꿔주어야 겠죠 twitter-square 세번째는 색상으로 warning, 아이콘은 fa-google-plus-official로 하고, 타이틀은 구글 플러스, 마지막은 붉은색, danger로 하고, 아이콘 instagram, 제목도 인스타그램이라고 바꿔 주세요

이 부분은 주석으로 Visible for over medium sized devices라고 하고, 세이브, 브라우저로 가서 보면, 이런 모습으로 되었습니다 지금은 클릭을 해 봐도 링크되진 않습니다 자 그 다음에는 스몰 디바이스, 모바일에서는 각 소셜 박스들이 4개가 한 줄로 나타나는 모습으로 할건데요, div에 클래스로 d-flex, flex-nowrap, d-block, d-sm-none으로, 각각의 간격이 없게 하기 위해서, no-gutters, 탭키를 눌러줍니다 그 아래에 div, 클래스로 d-inline, bg-success, py-2, px-3으로 하고 탭키를 눌러줍니다 그 안에 a 태그, href에는 #, 내용으로 아이콘은 페이스북의 아이콘을 적어 주구요, 텍스트 색상은 화이트 탭을 누릅니다

한 칸 띄우고, 글자는 좀 작게 small 태그를 넣고요 클래스로 text-white, 이 사이에 페이스북이라고 해줍니다 세이블 누르시구요 이것을 카피해서, 3번 붙여넣기 하시고요 두번째에는 info, 아이콘은 트위터로 바꿔주시고, 텍스 화이트 똑같구요, 제목에 트위터 그 다음 세번째는 warning, 아이콘은 페이스북을 지우고, 구글 플러스 아이콘으로 바꿉니다

텍스트 화이트 동일하고요, 타이틀에 구글 플러스 마지막으로 인스타그램인데, 색상은 danger, 아이콘은 인스타그램, 타이틀에도 인스타그램으로 해줍니다 그리고 여기 주석은 위의 주석을 복사해서 붙여넣기 하고, Only small, 이 스몰보다는 smart phone으로 이렇게 하는게 낫겠네요 자 세이브, 브라우저로 가서, 리프레쉬하시면, PC에서는 아까와 동일하게 변화가 없고, 이렇게 모바일로 폭을 줄여보면, 이렇게 한줄로, 각 소셜 리스트 박스가 보이게 되었네요

보기 괜찮네요 잘 됐습니다 자 그러면 html 코딩을 꽤 많이 한 것 같고요 이 아래는 지도가 들어가야 하는데, 지도는 간단히 할 수 있어요 우리가 이미 tempalte-parts 디렉토리에 acf-map이란 템플릿을 만들었습니다

그래서 얘기 풋터 위에 get template part 소괄호, 작은 따옴표에 template parts 디렉토리에 acf 콤마 map이라고 해 주시면 되겠습니다 세이브를 하시고 브라우저에서ㅓ 보시면, 네 지도 섹션이 별로 코딩하지 않고도 이전의 템플릿을 재사용하여 바로 똑같이 사용할 수 있게 되었습니다 이렇게 거의 프런트 페이지 코딩을 다 했는데요 지금 쭉 보시면 이 로고가 PC에서는 좌측 위에 있어 괜찮은데, 스마트폰에서 보면, 이렇게 중간에 로고가 있는 것은 좋지 않습니다

차라리 이 경우 로로는 모바일에서 보이지 않게 해 주는 것이 낫겠습니다 그래서 로고 박스 아이템에, d-none d-md-block을 추가해 주세요 예 나타나 케 이렇게 하시구요 세이브를 하신 다음에 이 플래시를 하시면 나타 씩 않게 됐죠 그 다음에 이 스마트폰에서 이렇게 클릭을 하게 되면 여기 상단에 지금 나타나는데 이 방 pc 가 아니라 이렇게 되있으면 위에 나타나는 지 아닌 지를 잘 알 길이 없지요 예 그래서 역시 마찬가지로 지금 이 부분도 스마트폰에서는 나타나지 보이지 않게 하는게 좋겠습니다 이 다시 mda 플로르 이라고 해 주시죠 2 플래시 를 눌러주시면 예 그래서 지금 이제 슬라이더 만 나타나고 그 다음에 페이지 아이템 박스 들 그런 인포메이션 광 어 예약에 관련된 은 섹시한 그리고 소셜 네트워크에 관련된 섹스 이렇게 많은 이 보이게끔 하는 것이 훨씬 더 좋을 것 같습니다 2 부터 부분에 있어서도 오트 폰에서는 그냥 깔끔하게 소켓 붐 맛 나타나게 하는 것이 어떨까 싶어요 부터 페이지로 가셔서 역시 마찬가지로 클래스가 c 에다가 2t 다시 그리고 ot 다시 mode 블록 이렇게 세상을 해주시죠 그리고 부러져서 예 2 플레이를 하시면 지도와 푸터 부근 없어지고 속해 뽑는 같은데 스마트폰에서는 그냥 요 정도만 해줘도 이 충분한 것 같애 저라고 라든가 약도 연어 따라갈 때문에 옆에 안됐습니다 이렇게 해서 프론트 페이지 에 대한 이 html 코딩을 같은데 문제는 뭐냐면 이렇게 크롤링 가니깐 상단에 있는 어드민 바 이걸 넣은 p 어드민 빠 라고 하는데 이게 뭐 잘 나타나지 가 예 사라져 버리죠 그리고 다시 pc 이렇게 좀 덜 되었을 때 스코어를 해보면 메뉴바가 애드민 바에 가려져 버리는 현상이 생깁니다 이럴 때는 스타일 점 씨에스 로 가셔서 스크롤 해서 델 밑으로 가서 여기에다가 wp 것 men 빨아 라고 주석을 만들어주시고 역 첫 번째 로그 드 다시 en 그리고 예 4 못받아 시 x 펜 테이트 같이 베이지 요거를 x 펜트 다시 깨지네요 n 직 이것은 탑의 크기를 32 픽셀 로 해주십니다 그리고 저장을 눌러 주시구요 브라우저로 가서 하드 리프레시 를 눌러주시면 이제는 스쿨을 하더라도 메뉴와 이쪽을 피해 어떤 인파가 겹치지 않습니다 요 css 에서 이렇게 로고 때린 네오 봐 s 펜 드 lg 를 탁 32 이렇게 맞춰 주시면 되구요 땀 또 하나 문제가 뭐냐면 이게 모바일로 갔을 때 이렇게 피어 버려요 그래서 이 모바일 때는 별도로 다시 미디어 쿼리를 이어갑니다 골뱅이 윗 이어 번민이 크린 & x 스 위 스 가 780 epx 1 대 얘기 위에 있는 일 이 부분들을 한번 더 복사를 하셔서 프로포즈를 해 주시고 이때에는 탑을 4 16 픽셀로 하시고 두번째는 지금 요거 에 클래스 각도로 어떤 id 값이 있는가를 확인을 해봐야 될 텐데 여기 보시면 아이디로 똘 pu 어드민 파 라고 되어있습니다 그래서 요게 일단 포지션을 6t 라고 하시고 브라우저를 해보시면 이제는 위치가 더 이상 삐어서 나타나거나 하나님 이익이 없게 된다 그래서 여기에다가 # wp 어데 민 빠 el 포지션을 픽스 로 해 주시게 쎄 입을 눌러주시고요 브라우 들어가서 일이 pc 를 눌러주시는 이제는 애드 미 봐도 픽스 되고 스마트폰 s 도 메뉴가 잘 나타나지 않거나 캡 치근 하는 현상 없이 제대로 나타나는 것을 보실 수가 있겠습니다 예 잘 됐습니다 이제 마지막으로 한가지 가변 남았는데요 브라우저를 스쿨을 하다보면 어떤 홈페이지 쓰는 여기 핫 하단에 탑 스크롤 버튼이 있으며 그래서 이거를 버턴을 누르면 이쪽으로 자동으로 이제 스크롤 되면서 상당으로 올라가며 하는 어 그런데 어떤 버튼들이 인데 요거는 자바스크립트를 이용해서 짜줍니다 지금 이 강좌가 사실 기초편 에 해당되는 강자 이고 해서 지금까지는 자바스크립트의 관련되는 내용들을 언급을 하지 않았고 추후에도 자바스크립트를 이용하는 코딩은 하지 않으려고 하는데 그래도 여기 스크롤 버터에 대한 것은 이 자바스크립트에 대한 코딩이 좀 필요합니다 그래서 요 부분은 동상이 좀 길어 지는 관계로 여기서 멈추고 다음편 동영상에서 디스코를 탑 버터를 만들고 자전거로 스크롤을 되는 동영상은 이어서 하도록 하겠습니다 예수가 있었습니다

DIY WP #36 front-page.php : Page item box

[음악] 계속해서 프런트 페이지 아이템 박스를 만들텐데요, 슬라이드 닫히는 주석 아래에, br을 2개 넣고, 이번에는 page-item-box라는 주석을 넣습니다 닫히는 주석도 표시하구요

이 사이에 div 아이디는 pageitembox 라고 하고, 그 밑에 row 클래스, 탭키를 눌러주세요 여기에 div 클래스로 col-lg-3 그리고 미디엄 이하의 디바이스에서는 2단으로 하기 위해서, col-6이라고 합니다 마진 바텀으로 mb-4라고 하고 탭키를 누릅니다 다음에는 박스를 만드는데, 우선 링크가 되게 하기 위해서 a 태그를 만듭니다 a 탭키

href에는 #으로 하구요 그 밑에 div 클래스는 box-bg라고 만들고, 패딩은 상하좌우 3스페이싱, 글자 색상은 회색으로 text-muted 탭을 눌러주시고, 그 아래에 이미지가 들어갑니다 img 클래스는 box-icon, 탭키를 누릅니다 src에는 좀 있다 입력할 겁니다

그 속에 박스 타이틀로 h5 클래스는 위쪽 마진으로 3스페이싱, 탭키 내용으로는 Page Item 1이라고 하겠습니다 나중에는 에디터에서 원하는대로 디스플레이되게 할 겁니다 밑에는 짧은 설명글인데, p 클래스는 mb-3 마진 바텀으로 3스페이싱을 두는 겁니다 탭키

글자 크기는 조금 작게 하기 위해서 small 태그를 넣고, 텍스트에는 lorem 7개의 단어를 넣습니다 이 div 엘리먼트 전체에 클래스로 page-box라고 하겠습니다 이 박스에 주석으로 page-box라고 표기해줍니다 이미지 src에는 이미지 경로를 지정할 텐데, 이런 모양의 png 파일을 폴더에 미리 넣어두었습니다 경로를 지정할 때는 html 방식으로 그냥 img/icon_img

png라고만 하면 안되구요, 경로 제일 앞에 php 워드프레스 함수로 bloginfo 소괄호 작은 따옴표 stylesheet_directory 세미콜론이라고 적고, 닫히는 php 태그 다음에 슬래쉬까지 넣어주어야 제대로 인식합니다 브라우저에 가서 리프레쉬하면 이렇게 크게 보이지만 이미지가 표시됩니다 이미지 사이즈는 css에서 수정해야 합니다 그래서 텍스트 에디터로 가서, stylecss를 오픈합니다

제일 아래줄에 Front page라고 주석을 넣고, 지금 page-box라는 클래스를 넣고, 중괄호, 엔터 position은 relative 그리고 page-box 속의 이미지 클래스인 box-icon은 position을 absolute로, width는 40%, bottom은 0, right 0, opacity라는 투명도에는 30%, 즉 03으로 합니다 이 opacity라는 프로퍼티는 윈도우 익스플로러에서는 filter 프로퍼티를 써야 하는데, 밸류도 alpha 소괄호에 opacity = 30이라고 해줍니다

이것은 인터넷 익스플로러 8이나 그 이전 버전용입니다 그 다음 box-bg라는 클래스에도 position은 relative, border는 1px solid 색은 회색으로 합니다 브라우저로 가서 리프레쉬하면, 네, 이렇게 박스테두리, 이미지는 오른쪽 아래, 약간 투명하게 보이면서, 텍스트는 a 태그 속에 있어서 글자색이 푸르게 보이게 되었습니다 텍스트에디터로 가서 a 태그에 클래스로 text-muted라고 해줍니다 이상한 것이 코딩할 때 글자색을 회색으로 보이게 했는데요, 아, 여기 box-bg에 text-mute라고 되어 있네요

a 태그에 text-muted라고 했으니까, 이 클래스는 지우겠습니다 이제 세이브를 하고, 브라우저에서 리프레쉬해 봅니다 네 이제 텍스트도 회색으로 되었고, 이미지는 조금 투명도가 들어간 모양입니다 style

css에서 이미지 클래스인 box-icon에 opacity를 30% 정도 두었기 때문입니다 좀더 보기 좋아졌습니다 이제 이 박스에 마우스를 갖다대면 박스 새도우를 넣어 입체감을 주려 하는데, 다시, stylecss로 가서, 클래스 box-bg에 hover라는 유사 엘리먼트를 정하고, box-shadow로 0 0 8px rgba에 괄호 0 0 0 18을 넣고, 두번째 밸류로 0 8px 16px, rgba에 0 0 0

36 정도로 하시겠습니다 세이브해주세요 브라우저로 가서, 리프레쉬하고 마우스를 갖다 대어 보면, 입체감있게 그림자가 생깁니다 그림자 효과가 빠르게 나타나죠 이 때는 클래스 box-bg에 transition, 전환효과로 0

5초 세미콜론이라고 추가해 줍니다 그리고 세이브하고, 브라우저로 가서, 리프레쉬를 해보세요 그러면 그림자 효과가 05초 동안 천천히 일어나는 것을 볼 수 있습니다 잘 되었습니다

다시 텍스트 에디터로 가서요 이 4개의 박스들은 라지 디바이스에서 보이게 하고, 이것을 스몰 디바이스에서는 다른 디자인으로 만들고 싶습니다 즉 모바일에서만 다르게 보이게 하고 싶은데요 여기 a태그 밑의 box-bg div는 미디엄 디바이스 이상에서만 지금 이 코드대로 보이게 하고 싶고, 스몰 이하에서는 다른 코드대로 보이게 할 겁니다 그래서 주석으로 over medium devices라고 적고, 그 아래에는 스몰 디바이스용으로 코드를 새로 짜겠습니다

div 클래스 box-bg, p-4, 또 text-white, 배경색상 bg-primary, 텍스트는 센터로 하구요 대신 엑스트라 스몰 즉 스마트폰에서만 보이게 d-block을 적습니다 스몰 디바이스부터는 보이지 않게, 그래서 d-sm-none이라고 해줍니다 그러면 앞의 이 div는 미디엄 이상, 아- 스몰 디바이스 이상에서 보이게 할테니까, medium 대신 small로 고칩니다 그래서 d-none d-sm-block을 추가해주는 거죠

아래 d-sm-none 다음에 탭키를 눌러주세요 이 사이에는 이미지를 넣을 텐데요 img 태그에 클래스는 img-fluid라고 하고 탭키를 눌러줍니다 src에는 위의 php 이미지 소스를 복사해서 붙여 주시구요 스몰 디바이스에서의 박스 배경색깔은 유채색으로 할 거라서, 아이콘은 흰색으로 이미지 프로그램을 이용해서 만들어줍니다

그래서 여기에 다른 이미지 이름인 icon_img_reversepng라고 해주시고, 사이즈는 width로 80px, 페이지 아이템의 타이틀은 들어가게 해야겠죠 h6로 클래스는 mt-3 타이틀은 strong 텍스트에는 page title 1이라고 해줍니다

세이브하고, 브라우저에서 리프레쉬해주세요 모바일용으로 폭을 줄여 보면, 이렇게 페이지 박스 아이템이 PC의 모습과 다르게 나타납니다 이제 여기는 주석으로 모바일용 디바이스에서 이렇게 페이지 박스 아이템이 나타난다는 내용을 표시해줍니다 이러면 하나의 아이템이지만, 2종류의 코드로 작성되어 스마트폰 용과 그 이상의 디바이스에서 각각 반응적으로 보이게 만든 것입니다 조금 번거로와도 훨씬 더 반응형 사이트가 되는 겁니다

약간의 변칙적인 방법을 사용했습니다 자 그러면 이제 여기까지가 하나의 페이지 박스 아이템이 되는 것이고, 다음 7개의 아이템들은 이 부분들을 모두 복사해서 붙여넣고 제목이나 이미지만 교체하면 되겠죠 2번째, 3번째 그리고 4번째 박스 아이템을 복사, 붙여넣기 해 주세요 이 4개의 아이템이 하나의 row를 이루고 있어서, 일단은 이렇게 합니다 그 다음에 아이템 내용을 조금 수정합니다

아이템 1 대신 2로, 여기도 2로 고쳐 주세요 이미지는 모두 다른 이미지들을 이용해야 하는데, 지금은 html 코딩이니까 지금 이 이미지를 우선은 그대로 쓰겠습니다 대신 제목들만 먼저 바꾸어두죠 마지막으로 아이템 4, 또 아이템4라고 해줍니다 주석으로 여기까지 1st row가 됩니다

자, 이제는 이 첫번째 row의 4개의 아이템 부분 모두를 드래그하고 복사해서, 그 아래에 붙여넣기 합니다 이번에는 2nd row라고 하고, 아이템 번호들만 바꿔줍니다 이건 5가 되고, 이건 6이 됩니다 여기와 여기는 7이 되고, 또 이것과 이것은 8이 됩니다 세이브

브라우저에서 리프레쉬하면, PC에서 8개의 박스 아이템이 잘 나타났고, 폭을 줄여보면 다른 색상의 박스 아이템이 보입니다 지금 복사 붙이기를 통해 모바일에서의 색이 모두 같은데, 배경색의 클래스만 바꿔주면 되겠죠 스몰 디바이스의 코드에서 배경색만 바꾸면 됩니다 두번째는 하늘색 bg-info, 세번째는 노란색으로 bg-waring, 네번째는 붉은 색으로 bg-danger, 다섯번째는 초록색으로 bg-success, 여기 6번째는 bg-secondary로 하고, 7번째는 어두운 색으로 bg-dark, 다음 마지막 8번째는 밝은 색깔인 bg-light로 고치겠습니다 세이브하고 브라우저 리프레쉬하면, 이렇게 다양한 색상으로 보이게 되었습니다

primary, info, warning, danger, succsess, secondary, dark 그리고 light 그런데 마지막 bg-light는 배경이 밝은 색이니까, 텍스트가 보이지 않습니다 그래서 이 8번째에는 text-white를 지워줍니다 세이브를 해보면, 네, 이렇게 글자가 보이게 되었습니다 또 8번째는 이미지도 PC의 것과 같은 것을 써야 보이겠죠

reverse를 지웁니다 세이브하고 브라우저에서 리프레쉬를 하면 아이콘이 보이게 되었습니다 보기 좋아졌습니다 당연히 클릭 또는 모바일에서는 터치하면 해당 페이지로 링크될 것입니다 다시 PC화면으로 넓혔습니다

잘 되었습니다 이제 페이지 박스 아이템의 코딩은 모두 마쳤고, 프런트 페이지의 메인 부분까지 html 코딩이 다 된 겁니다 잠시 쉬었다가, 다음 동영상에서 프런트 페이지의 사이드 섹션 코딩을 이어 하겠습니다

🔴 WordPress Progressive Web Apps (PWA) Nedir? Nasıl Yapılır? How to Build WordPress PWA?

안녕하세요 친구 오늘 당신은 WordPress 사이트에서 Progressive Web Apps를 사용하고 있습니다

WordPress PWA를 만드는 방법? 우리는 어떻게 그것을 무능하게 하는가? 우리는 이것을 검토 할 것이다 프로그레시브 웹 앱 (PWA)은 2015 년 Google에 의해 발표되었습니다 모바일 응용 프로그램을 사용하지 않고 응용 프로그램을 사용하는 것처럼 인터넷 사이트를 느끼게 해주는 소프트웨어입니다 그것을 설명하기 위해 다음 예제를 제공 할 수 있습니다 당신은 웹 사이트가 있습니다

사용자가 브라우저로 브라우저에 로그인하고 있습니다 프로그레시브 웹 앱 (예 : PWA)을 설치하면 사용자가 브라우저를 통해 더 이상 브라우저에 있지 않습니다 귀하의 휴대 전화에서 귀하의 사이트 아이콘을 클릭하여 브라우저가 응용 프로그램을 통해 로그인하고 있습니다 PWA를 사용하면 특별한 것을 얻을 수 있습니다

스플래시 화면을 만들었습니다 그런 다음 귀하는 귀하의 홈페이지 또는 연결하려는 페이지에 연결됩니다 PWA는 그 밖에 무엇이 있습니까? 브라우저에 원하는 색상을 지정할 수 있습니다 빨간색, 녹색, 파란색으로 브라우저 위쪽 부분의 색상을 원하는대로 지정할 수 있습니다 당신은 사용자 정의 할 수 있습니다

브라우저와 달리 사용자는 웹 또는 모바일 앱 사용의 느낌을 감지합니다 그것은 전적으로 응용 프로그램을 사용하는 것 같습니다 또한 사용자는 오프라인으로 설치된 사이트 (예 : 오프라인)에 PWA에 연결할 수 있습니다 그러나 중요한 알림을 보내는 것은 좋은 알림입니다 PWA를 설치하려는 사이트에는 SSL 요구 사항이 있습니다

PWA는 사용자에게 많은 이점을 제공합니다 프로그레시브 웹 앱은 사용하기 쉽습니다 PWA 용 응용 프로그램을 설치할 필요가 없습니다 PWA를 WordPress 사이트에 설치하면 사이트 방문자 집 전화를 전화기에 추가하려는 경우 경고를 클릭하면 사이트 아이콘이 전화기로 다운로드됩니다 이것은 매우 우아한 상황입니다

작성하기 전에 사이트 로그온 또는 아이콘이 전화기에 설치되어 있습니다 사용자가이 아이콘을 클릭하면 특수 시작 화면이 열리고 집이 연결됩니다 시작 화면에는 로고와 사이트의 이름이 표시됩니다 그러면 우리가 연출하는 페이지가 열립니다 PWA는 사용자의 전환율을 높입니다

내 사이트에 대한 빠른 링크를 제공합니다 그는 내 사이트에 오프라인으로 로그인 할 수 있습니다 방문자는 인터넷에 연결되어 있지 않아도 우리가 연출하는 페이지에 연결할 수 있습니다 우리는 오늘 WordPress 사이트에서 PWA 설치 방법을 검토 할 것입니다 그래서 시작하자 🙂 WordPress에 PWA를 설치하려면 내 사이트에 Super PWA 플러그인을 설치하십시오

WordPressorg 플러그인 페이지에서 Super Progressive Web Apps 플러그인을 다운로드 할 수 있습니다 플러그인 / 새로운 섹션 추가에서 플러그인을 설치할 수 있습니다 Super PWA를 설치 한 후에해야 할 일은 실제로 매우 간단합니다 응용 프로그램 이름에 사이트 이름을 입력 할 수 있습니다

저는 창립자이며 SSL을 사용하여 설치 한 beylikduzuzufocom 사이트 맵의 예를 보여 드리겠습니다 SSL을 설치 한 사이트이기 때문에 이것을 선택했습니다 Application Short Name 또는 다른 이름에 사이트 이름을 입력 할 수도 있습니다 여기서 아이콘을 선택하십시오

그는 당신에게 크기를주었습니다 192×192 픽셀 png 형식 로고 또는 아이콘 시작 화면에서 512×512 크기의 비주얼 또는 아이콘을 실행할 수 있습니다 Png에서 배경색은 시작 화면의 배경색입니다

테마 색 브라우저 rengini는 상단 부분을 표현합니다 시작 페이지는 전달하려는 페이지입니다 기본 설정을하면 집으로 이동합니다 나는 그렇게했다 오프라인 페이지를 기본값으로 두었습니다

인터넷이없는 경우 사용자가 방문 할 페이지입니다 원하는 경우 다른 페이지로 리디렉션 할 수 있습니다 Orientation Horizontal Horizontal Vertical 사이트의 표시를 결정합니다 세로는 세로를 나타냅니다 그는 다른 통제를 스스로합니다

JS, Service Worker 컨트롤 및 SSL 컨트롤 만들기 이제 트림 설정 저장이라고합니다 PWA가 이제 저희 사이트에 설치되었습니다 화면 오른쪽에 나는 내 자신의 PWA 예제를 보여줄 것이다 그를 검사 할 수 있습니다 지금 당장 활동하고있어

그것이 내가 말하는 전부입니다 다음 비디오에서 만나요 당신이 나레이션을 좋아한다면, 그것을 좋아하는 것을 잊지 마십시오 YouTube 채널을 구독하면 새 동영상에 대한 알림을받을 수 있습니다 유튜브 구독은 무료입니다

좋은 하루 되세요 🙂

How to Change the Font Size in WordPress (3 Different Options)

WordPress 게시물이나 페이지의 글꼴 크기를 변경 하시겠습니까? 잘 지내라 보고있다

이 비디오에서 나는 당신을 변화시키는 데 사용할 수있는 세 가지 방법을 보여줄 것입니다 WordPress의 글꼴 크기 방법 1은 아마 그것을하는 가장 쉬운 방법이고 그것은 귀하의 게시물이나 페이지의 단락 제목을 변경하는 것입니다 무엇을 보여줄지 나는 WordPress 대시 보드로 가보자 게시물, 모든 게시물, 우리가 작업하고있는 게시물을 편집하여 안녕하세요

여기서 단락을 볼 수 있습니다 이 중 하나를 변경하려면 클릭 만하면됩니다 단락과 같은 것을 사용하고 싶습니다 이제이 크기들 테마의 스타일 시트에 의해 제어되므로, 다른 테마 여기 조금 다르게 보일지 모르지만 그건 정말 빠릅니다 그런 식으로 글꼴 크기를 변경하는 방법

이제 조금 더 원하면 글꼴 크기 및 텍스트 서식을 제어 한 다음 설치하려고합니다 TinyMCE Advanced 플러그인 그렇게하기 위해 우리는 플러그인 영역으로 향할 것입니다 새로 추가를 클릭하고 TinyMCE를 찾고있는 검색 창에서 이것은 우리가 원하는 것은 설치하고 일단 설치하면됩니다 활성화를 클릭해야합니다

이제는 활성화되어 우리가 갈 수 있고 그것을 설정하십시오 여기에서 설정하거나 대시 보드에 있다면 여기에 액세스해야합니다 설정에서 이동할 수도 있고 TinyMCE 고급 탭 바로 옆에 있습니다 여기에있는 버튼이 보입니다 사용 중이거나 사용중인 버튼은 당겨서 위로 끌 수 있습니다

그것을 위해 기본적으로 글꼴 패밀리와 글꼴 크기를 이미 입력했습니다 버튼을 여기까지 올리면 아래로 스크롤하여 변경 사항 저장을 클릭하면됩니다 이제 우리가 작업하고있는 게시물로 돌아갈 수 있습니다 안녕하세요 세상을 열어 보겠습니다

여기에서 변경할 영역을 강조 표시 할 수 있습니다 원하는 글꼴 크기, 여기에서 글꼴 모음을 선택할 수도 있습니다 글꼴에 대한 좀 더 세분화 된 제어 기능을 제공하는 가장 좋은 방법입니다 웹 사이트 이제 세 번째 방법은 약간의 코드를 사용하고 단순히 CSS를 사용하여 단락의 전체 글꼴 크기를 변경합니다

그렇게하려면 나는 여기서 나가고, 우리는 우리의 Appearance Customize 영역으로 가고 싶다 너의 테마는 다를 수 있지만 추가 CSS 탭이 있어야합니다 여기에서 우리는 약간의 여분의 CSS를 추가하여 그것을 제어 할 것이므로 여러분에게 보여주고 싶습니다 내 모습을 클릭하면 변경 될 수있는 세계를 클릭하겠습니다 실시간으로 변경 사항을 저장하기 전에 어떻게 보이는지 확인하십시오

나는 보여줄거야 너 무슨 뜻이야? 그래서 여기에서 단락에 대한 약간의 코드를 추가하고자합니다 우리는 그것을 입력 할 것이고, 우리는 글꼴 크기를 바꾸고 싶습니다 그리고 당신은 그 글꼴로 놀 수 있습니다 여기 크기

그 변화를 만들 자마자, 계속해서 세미콜론으로 끝내자 이것은 완벽하게 훌륭하다 조정할 수있는 코드 조각 여기 코드를 가지고 놀고 싶을뿐입니다 원하는 크기를 확인하고 문단 코딩 만 변경하면됩니다

그 아름다움은 일단 우리가 원하는 크기에 만족하면, 일단 우리가 클릭하면 전체 사이트와 게시판에 게시 할 수 있습니다 그래서 그들은 WordPress에서 글꼴 크기를 변경하는 데 사용할 수있는 세 가지 방법 너 배웠어? 오늘의 비디오에서 나온 게 뭔가? 그렇다면 YouTube 채널을 구독하고 우리는 당신이 당신의 WordPress 웹 사이트를 관리하고 감사 할 수 있도록 도움이되는 팁을 보낼 것입니다 지켜보기 위해

WordPress SEO: Advanced Technical SEO Made Easy

WordPress는 단지 또 다른 블로깅 플랫폼 이상입니다 사실 TechCrunch와 BBC America와 같은 인기있는 웹 사이트는 WordPress를 사용하여 매달 수백만 명의 검색 방문자를 호스팅합니다

그러나 WordPress를 그대로 사용하면 그 종류의 저울에 도달하려는 경우 잘라낼 수 없습니다 사이트 속도가 빠르며 기술적 인면을 확인해야합니다 서재응은 구조적으로 건전합니다 그리고이 비디오에서, 당신은 정확히 어떻게 그 일을하는지 정확히 알게 될 것입니다 계속 지켜봐

[음악] SEO가 무엇인지, Sam Oh 여기 Ahrefs와 함께, 검색 트래픽을 늘릴 수있는 SEO 도구, 경쟁사를 연구하고 틈새 시장을 장악하십시오 이제 이것이 WordPress SEO 시리즈의 두 번째 부분입니다 그리고 우리는 이미 많은 기본 설정과 SEO 친화적 인 게시물과 페이지를 만드는 방법을 다루었습니다 이 튜토리얼에서는 기술적 인 SEO 측면에 대해 다룰 것입니다 특히 WordPress 내에서 페이지 속도, 중복 컨텐츠 및 내부 링크가 모두 포함되어 있습니다

가자 시작하기 전에 Ahrefs 사이트 감사 도구를 사용하여 내 웹 사이트에서 전체 사이트 감사를 실행하겠습니다 그리고 때때로 보고서 중 일부를 다시 참조 할 것이며, 이는 우리에게 도움이 될 것입니다 수정할 페이지를 식별하십시오 우리가 할 첫 번째 일은 최적의 속도와 성능을 위해 WordPress 사이트를 구성하는 것입니다

Google이 공식적으로 페이지 속도가 가장 중요한 요인이라고 말했기 때문에 이것은 중요합니다 데스크톱 및 모바일 용 알고리즘 그래서 사이트 속도를 위해 우리는 프레임 워크를 설정하고 있습니다 여기에는 캐싱, 압축, CDNs 및 minification 그리고 사이트 속도를 높이기 위해 특별히 사용하는 3 가지 플러그인이 있습니다 첫 번째는 W3 Total Cache입니다

WordPress 캐싱을 사용하면 기본적으로 게시물의 정적 버전을 만들고 페이지는 브라우저에서 빠르게 렌더링 할 수 있습니다 매일 매일 업데이트하지 않으므로 빠른로드가 필요합니다 시간 및 더 나은 사용자 환경을 제공합니다 플러그인을 설치하면 왼쪽 사이드 바에 '성능'이라는 새 메뉴가 표시됩니다 일반 설정으로 이동하면 내가 사용하도록 설정 한 기본 설정이 표시됩니다

페이지 캐시, 축소화, 브라우저 캐시 및 CDN 그리고 체크 박스 아래에서 각각의 작업에 대한 간단한 설명을 볼 수 있습니다 이러한 각 옵션을 사용자 정의하려면 세로 막대에서 해당 하위 메뉴로 이동할 수 있습니다 이제 사이트의 속도에 영향을 줄 수있는 기능이 반드시 작동하지 않는다는 점에 유의해야합니다 너를 위해서

그리고 서버 설정과 같이 고려해야 할 변수가 너무 많습니다 즉 아파치 대 NGINX 대 Engintron, 귀하의 호스팅 계획 – 즉 vs vs vs vs dedicated 등 따라서이 사이트의 모든 단일 설정을 진행하기보다는 설명에서 내 W3 총 캐시 설정의 스크린 샷 내가 사용하는 두 번째 플러그인은 ShortPixel입니다 그리고이 이미지는 서버에 업로드 할 때 이미지를 자동으로 압축하고 최적화합니다 따라서 내 미디어 라이브러리를 보면 이미지가 업로드 된 것을 볼 수 있습니다

ShortPixel은 이미지 품질을 손상시키지 않으면 서이를 자동으로 압축합니다 그리고 내가 사용하는 최종 플러그인은 Speed ​​Booster Pack입니다 설치 한 후 설정 위로 마우스를 가져 가면 액세스 할 수 있습니다 하위 메뉴의 플러그인 이름 여기서 다루고 싶은 것은 게으른로드 이미지입니다 이제이 옵션을 활성화하면 필요할 때만 이미지를로드합니다

예를 들어이 페이지를로드하면 페이지에서 더 아래쪽에있는 이미지 만 해당 위치로 스크롤 할 때로드하십시오 이 설정으로 놀고, 업데이트 할 때 홈페이지를보아야합니다 그 옆에 통계를로드하십시오 Pingdom의 전체 페이지 테스트와 같은 도구를 사용하여 페이지로드를 표시 할 수도 있습니다 시간 및 성능 최적화 팁

더 정확한 표현을 얻기 위해 같은 위치에서 페이지를 핑하십시오 페이지 속도 사이트 감사 도구는 시간이 지남에 따라 페이지 속도를 추적하므로 사이트 감사에서 보고서로 이동합니다 Ahrefs에서 특히 느리게로드되는 페이지가 있는지 확인하십시오 따라서 실적 보고서를 살펴 보겠습니다

그리고 여기에서 2 초 이상의 로딩 시간을 가진 5 페이지가 있다는 것을 알 수 있습니다 여기를 클릭하면 데이터 탐색기에 결과가 표시됩니다 첫 번째 결과는 유기적 인 트래픽을 발생시키는 것으로, 첫 번째 시간은 바이트뿐만 아니라 파일 크기가 내가 원하는 것보다 높게 보인다 URL을 복사하여 Google Page Speed ​​Insights에 붙여 넣습니다 결과는 대부분 좋은 결과를 얻었습니다

아래로 스크롤하면 이미지를 최적화 할 수있는 몇 가지 제안 사항이 표시됩니다 페이지에 이미지, CSS 또는 JavaScript 관련 문제가있는 경우 링크가 표시되어야합니다 이 페이지의 최적화 된 버전을 다운로드하려면 페이지 하단에서 따라서이 이미지의 최적화 된 버전을 다운로드하고 게시물에서 바꿉니다 이제 모든 페이지에서이 작업을 수행하는 데는 시간이 걸릴 수 있으므로 유기적 인 트래픽을 차단하고, 속도에 정말로 집착하는 경우 목록을 아래로 이동하십시오 좋아, 우리 사이트는 멋지고 신속하며 Google과 사용자 경험에 아주 좋습니다

다음은 내부 링크를 추가하여 순위를 매길 페이지에 링크 평등을 전달합니다 데이터 탐색기에서이 맞춤 필터를 사용하여 일부가 아닌 URL을 식별 할 수 있습니다 페이지 아카이브를 가리키는 내부 링크가 3 개 미만이고 200 응답 코드가 반환됩니다 이 웹 사이트에는 131 개의 URL이있는 것으로 보입니다 목록을 살펴보면, 대다수는 내가 삭제할 계획이지만, 우리가 유지하고 더 높은 순위를 매길 계획을 가진 사람들이 분명히 있습니다

이제 자연 트래픽별로 페이지를 내림차순으로 정렬 해 봅시다 그리고 붕산과 붕산에 관한 것은 좋은 것 같습니다 그러면 '모든 게시물'페이지로 이동하여 여기에 검색 창을 사용하고 키워드를 검색합니다 "붕사", 내가 "붕사 대 붕산과 관련된"게시물로 연결될 수있는 게시물이 있는지 확인하십시오 그리고 그것은 에센셜 오일로 청소에 이것처럼 보이는 게시물에 키워드를 포함합니다

또는 Google에서 site : yourdomaincom을 검색 한 다음 "OR"검색 연산자를 사용하여 키워드를 추가하십시오 Google 검색 이후 검색 쿼리와 일치하는 15 페이지가 있음을 알 수 있습니다 게시물과 페이지를 모두 포함하는 모든 색인 된 페이지를 통해 WordPress의 내부 링크를 사용하는 또 다른 매우 멋진 아직 효과적인 방법은 "인기있는 기사 "위젯 이제는 전환율이 높은 페이지 또는 전환율이 높은 페이지가있을 수 있습니다

Google에서 더 높은 순위에 올리고 싶습니다 Backlinko의 블로그를 보면 그가 큰 가이드 중 일부를 통해 여기까지 완료되었음을 알 수 있습니다 이 전략을 한 발 더 내딛고 "Custom Sidebars"라는 플러그인을 설치할 수도 있습니다 이렇게하면 모든 게시물이나 페이지에 사용자 정의 사이드 바 구성을 삽입 할 수 있습니다 예를 들어 다른 기사 나 제품에 대한 링크가 포함 된 맞춤 사이드 바를 포함 할 수 있습니다

게시물의 내용과 관련된 페이지 자, 이런 종류의 팁은 당신이해야 할 일이 아닙니다 사실, Ahrefs 블로그와 다른 많은 인기 블로그들은 이것을하지 않습니다 하지만 제 경험으로는 잘 작동하는 것으로 나타났습니다 중복 콘텐츠 문제를 다루려고하는 마지막 일 이제 첫 번째 동영상에서 Yoast SEO 플러그인을 설치하고 설정하는 방법에 대해 간단히 설명했습니다

당신의 사이트 맵을 올리십시오 다른 모든 것들은 상자에서 벗어나 잘 작동하지만 몇 가지 고급 기능이 있습니다 색인 생성을 처리하고 원치 않는 중복 페이지를 만들지 않도록 도와줍니다 먼저 Yoast 설정 위로 마우스를 가져 가서 제목 / 메타를 선택하면 설정이 적용됩니다 "Post Types"설정으로 이동하여 두 페이지의 메타 로봇 ​​설정을 확인하십시오

게시물의 선택을 취소하면 모든 블로그 게시물과 페이지가 기본적으로 색인화되도록 설정합니다 개인적으로, 나는 "noindex, follow"로 미디어 설정을 지정합니다 왜냐하면 워드 프레스는 종종 이미지 만있는 것 외에는 별도의 미디어 페이지가 있습니다 그리고 이것은 분명히 얇은 콘텐츠로 분류 될 것입니다 다음으로 "Taxonomies"탭으로 이동하십시오

대부분의 경우 태그 및 형식 옵션을 지정하지 않아도됩니다 WordPress의 태그에는 기본적으로 SEO 값이 없습니다 귀하의 게시물을 분류하는 방법이 더 많습니다 지금은 너무 많은 사이트가 보이지 않습니다 예를 들어이 태그 페이지를 보면 몇 가지 블로그 게시물 만 표시됩니다

블로그 아카이브 페이지에서 액세스 할 수 있습니다 그리고 태그 페이지의 색인을 생성하도록 Google에 지시하는 것은 실제 가치가 없습니다 다른 하나는 Сategories입니다 자, 이건 논쟁의 여지가 있습니다 어떤 사람들은이 페이지들을 색인하지 않는 것을 선호하는 반면 다른 사람들은 그것들의 순위를 매기기를 원할 것입니다

그리고 내 의견으로는, 이런 빵 부스러기를 사용하거나 카테고리를 탐색 도구로 사용한다면 많은 대형 출판물과 같은 항목은 색인 가능으로 남겨 둘 것을 권한다 대부분의 경우에 또는 사람들이 Google에서 사람들을 발견하는 데 가치를 발견 할 것이라고 생각하는 경우 그들 그대로입니다 나는 당신이 수천 페이지를 창조하지 않는 한 이것에 관하여 너무 많이 강조하지 않을 것이다 잠재적으로 크롤링 예산, 측면 탐색 또는 링크 에퀴티의 가치 하락으로 이어질 수 있습니다

다음은 "Archives"탭입니다 여기에서는 실제로 중복되는 내용을 피하는 방법에 대해 설명합니다 이 사이트는 단 하나의 저자 블로그이므로 필자는 저자 아카이브 모두에 ​​대해 색인을 생성하지 않기로했습니다 날짜 기반 아카이브 그 이유는 Google이 색인 생성하도록 남겨두면 블로그 홈페이지 또는 게시물 목록은 작성자 아카이브와 동일합니다 마지막으로 "기타"탭입니다

여기에서는 아카이브 하위 페이지를 색인 생성하지 않을 것을 권장합니다 그리고이 예에서 / page / 2와 같은 URL을 가진 아카이브 페이지에 있음을 알 수 있습니다 사실 Google은 페이지 매김 관련 우수 사례에 대한 동영상을 제작했으며 몇 가지 다른 옵션 내 생각에 가장 좋은 것은 "view-all"함수를 만들고 모든 아카이브에 사용하는 것이 었습니다 페이지에서 '전체보기'페이지에 정식 태그를 포함 할 수 있습니다

소요되는 시간과 같이 충족되어야하는 특정 조건이있었습니다 이 페이지를 렌더링하지만, 당신이 가지고있는 걱정거리라면 전체 비디오를 보도록하겠습니다 WordPress 색인 생성에 관해 알아야 할 마지막 사항은 당신이 색인을 생성 할 수 있다는 것입니다 특정 페이지 또는 게시물 noindex로 바꿀 페이지에서 Yoast SEO 설정으로 스크롤 한 다음 톱니 바퀴 아이콘을 클릭 한 다음 드롭 다운 메뉴에서 'noindex'를 선택합니다 Google 색인에 포함되기를 원하지 않는 페이지의 경우 테스트를 거친 방문 페이지 또는 이메일 또는 판매 유입 경로 내에있는 페이지

중복되는 콘텐츠 문제를 더 깊이 파고 싶다면 '콘텐츠 품질'보고서로 이동하십시오 Ahrefs의 현장 감사 도구 내에서이 웹 사이트에는 녹색 만 표시됩니다 중복 된 페이지의 클러스터는 정식이 일치 함을 의미합니다 경계에 놓이기를 원하는 것은 불량 복제본이거나 정규형 이 WordPress 웹 사이트에서 볼 수 있듯이 설정되지 않았습니다 이제, 내가 여기에서 보여준 것보다 더 많은 기술적 인 SEO가 있습니다

그러나 WordPress와 이러한 플러그인 및 기술을 결합하면 귀하의 웹 사이트 속도를 높이고 쉽게 피할 수있는 중복 콘텐츠 문제를 예방할 수 있습니다 이 비디오가 도움이되었다고 판단되면 좋아요, 공유 및 구독하십시오 그리고 나에게 알려줘 내가 검색 엔진 최적화를 수행하는 것과 관련된 주석에서 놓친 것이있다 WordPress와 함께

그러니 계속 연마하면 다음 튜토리얼에서 보게 될 것입니다

WordPress Advanced Tutorial 2017: how to add meta boxes and hook easily and effectively in English

안녕 친구 완벽한 워드 프레스 고급 비디오 튜토리얼에 오신 것을 환영합니다 웹 솔루션 저는 Iman Qasim입니다

오늘은 비디오 튜토리얼 우리는 어떻게 우리가 추가 할 수있는 메타 박스에 대해 배울 것입니다 메타 박스 어떻게 특정 게시물이나 페이지에 저장할 수 있습니까? frontedn에 표시하십시오 codex 나 wordpressorg에 가서 메타 박스 그것은 메타 박스를 추가하는 것이 메타 박스를 추가한다고 말한다 모든 게시 유형에 대한 메타 박스 등록을 허용합니다

두 가지 매개 변수를 허용합니다 게시물 유형 및 게시물 단순 게시물 또는 특정 게시물 유형 및 그것은 또한 말했다 메타 상자를 추가하면 베스트 프랙티스를위한 게시물 I이 밑줄로 표시되므로 그것을 실제적으로 그렇게함으로써 당신에게 자세히 설명하십시오 WordPress 인스톨은 http : // localhost / woostore이고 내가 포스트에 가면 우리가 볼 수있는 게시물을 편집하십시오 여기에 메타 박스가 추가되지 않았으므로 여기에 추가하십시오 메타 박스는 메타 박스를 추가해야하는 공정한 액션입니다

그래서 우리는 액션 책입니다 함수 나 PHP 내부에 추가 할 수 있습니다 그렇지 않으면 별도의 로그인을 생성 할 수 있습니다 그것을 거기에 추가한다 나는 우리 함수에 의해 그것을 할 것이다 액션은 메타 박스를 추가하지 않습니다

상자는 메타 박스를 여기에 추가합니다 나는 가죽 상자를 잘라냅니다 그래서 여기에 여러 개의 상자를 추가하여 하나의 메타 상자로 시작할 수 있습니다 다른 상자를 사용자 정의 함수를 만들고 게시 유형을 수락하거나 게시합니다 두 가지 매개 변수를 게시 또는 게시 할 수 있으므로 여기에 두 게시물을 올리겠습니다

게시물의 유형 그래서 당신이 추가를 사용하는 경우 메타 상자 또는 물건을 사용하여 추가 할 것입니다 당신은 금속 상자를 넣을 필요가 있지만 특정 메타 박스는 여러 개의 메타 박스를 추가 할 수 있으므로 이처럼 여러 항목을 추가 할 수 있으므로 어디서나 모든 메타 상자를 추가 할 수 있습니다 별도로 표시하려는 경우 일부 매개 변수를 제외하고이 메타 상자 추가 먼저이 ID가 고유해야하므로이 ID와 마더 상자 ID를 얻습니다 person 메타 하나 ID를 얻고 그 메타 박스의 이름을 히다라고합니다 그래서 my 그 후에 내 상사에게 질문 할 콜백 함수와 여기에 표시하고자하는 해당 값을 표시하십시오 여기에 넣으겠습니다

lotta 상자에 사용자 정의 아웃을 사용하면 측면 맞춤 금속을 사용합니다 상자와 거기에 점수가 바로 거기에 비율과 다음 매개 변수는 우리가 여기에 가서 변경하면 표시하려는 위치입니다 클릭 메타 상자 추가 상자가 아니라 상자를 클릭하십시오 그래서 메타 상자를 추가하자 그것을 팝업하여 매개 변수를 보여주고 그 매개 변수와 사용 방법을 설명합니다 그것들은 메타 박스를 추가하기 때문에 기능적인 코드가 적게 든다 얼마나 많은 매개 변수를 받아들이 느냐 1 2 3 4 5 & 6 7 매개 변수 3 개의 매개 변수 필요하다면 필수 항목이며 여기서 나머지는 필수 항목입니다

선택적 매개 변수가 더 가깝기 때문에 첫 번째 매개 변수는 ID입니다 이미 여기에 신분증을 두었습니다 두 번째 것은 제가 여기에 넣은 제목입니다 고객 수준의 qaeda 세 번째는 코넬 기능입니다 콜백 함수를 지운 다음 우리가 원하는 화면을 지우십시오

스타일을위한 일시 중지 또는 원하는 곳 어디에서나 표시하여 이렇게하면 어디에 좋은 맑은 우편물에 표시하고 싶습니까? 당신이 그것을 원한다면 포스트 메타 박스에 제기 될 것입니다 그래서이 사람은 받아들이지 않습니다 우리는 여기에 어떤 매개 변수도 넣을 필요가 없다 그래서 우리는 그것을 모두 사용할 수 있습니다 우리는 그것을 필요로하지 않는다고 생각합니다

당신이 여기에 예약하면 조정할 것입니다 게시물을 여기에 넣으면 게시물 안에 표시됩니다 당신이 증명서 또는 다른 사람 같이 관례 포스트 유형 이름을 끼워 넣는 경우에 페이지 클라이언트가 깨끗하게 표시되므로 사용하게 될 것입니다 컨텍스트 정상면과 고급 그래서 세 매개 변수 측면으로 이름이 오른쪽에 표시 될 것임을 암시하며 여기에 내가 보여줄 수 있습니다 내 카테고리 태그 및 추천 이미지에 게시해야하는 곳입니다

옆에 붙이자 다음 문맥은 나를 위해 네 왼쪽면을 넣을 것이다 그리고 나서 문제가 우선 순위가 낮을 것입니다 내가 그것을 높게 주면 그것이 연결될 어떤 곳이라도 주면 좋겠다 게시하기 전에 여기에 꼭대기에 올려 놓으십시오

그래서 우선 순위를 정합니다 여기에 추가되어 다음 콜백 구성 도우미가있는 경우 선택 사항입니다 가치있는 당신은 당신이 그것을 전달할 수 있어야합니다 그냥 수수께끼를 전달할 수 지금은 내가 필요 이 함수를이 함수로 만들고 여기에 글로벌 포스트를 할 것입니다 현재 게시판을 삭감하십시오 다른 유형의 포스터이기 때문에 세계화하십시오 포스트는 그 포스트를 얻을 것이고 나는 그 후에 디폴트 값을 가까이서자를 것입니다

언제 어디서나 저장하면 우리가 그 게시물을 얻을 필요가 있도록 메타 메타로 저장할 수있는 메타 박스 게시물 ID를 돌려 보겠습니다 여기서 맞춤 데이터를 입력 해 드리겠습니다 우리가 다시 사용하게 될 발 고마쓰도 나에게 말해 줄 수 있도록 여기에 놓았다 가치가있는 것이 무엇이든간에 내가 집중할 수 있다면 여러 값을 여러 영역에서 학습 한 여러 영역을 정의한 경우 아리아 값 하나의 값을 사용하면 오류가 발생합니다 이제는 입력 상자가 표시되는 양식을 여기에 표시 할 수 있습니다

이 항목에 대해 이야기 할 수있어서 내가 처음에는 레이블 유형을 입력 한 다음 사용자 정의와 동일한 사진 텍스트를 입력합니다 볼과 값은 에코 공기와 같아서 병을 그대로 남겨 둘 수 있습니다 그것을 부여하고 건물과 연결하고 여기에 나는 약간을 더한다 매개 변수를 제외하고 더 많은 칠리가 기사 통화를하십시오 나는 여기에서 트롤 해보니 여기서 판매 할 예정이고 W는 전형적인 출석을 좋아한다

crowdfunding 양식을 먹을 수 있습니다 그것은 당신이 당신을 변경할 수 있습니다 보여 드리죠 단백질이 들어 있고 거기에 맞춤 금속 상자가 있습니다 여기에 우리가 파티를 열 수있는 페이지에 그것을 추가하고 싶다면 multiple을 당신이 그것을 지나쳐 호스트와 케이지를 추가 할 수있게됩니다 여기에 여기에 추가 된 새 페이지를 추가하면됩니다 배열을 전달하면 양쪽에 추가 된 게시물로 돌아가고 이제는 내가 원한다 여기에 뭔가를 넣으려면 메타 박스에 저장해야합니다

이 가치에 의해 뻗어 포스트 문제를 누른 다음 여기에 표시되지만 어떻게 우리는 그것을 저장하기 위해 그것을 저장할 수있는 힘을 필드에 대한 조치라는 사용자 정의 오래된 다른 상자 그래서 이름을 고유하게 만들 때 이름을 지정했습니다 함수의 여기에 우리가 구멍을 줄 것이다 그리고 나 여기에서 확인할 것입니다 게시자의 외계인 인스턴스와 정확히 일치하는 부분도 있습니다 여기를 시작한 입자가있는 문 게시물이라고 부르면 따라 와야합니다 우리가 계약을하는 것을 정의하는 첫 번째 행동에서 실패하기 전에 거기에 몇 가지 수표를 넣으십시오

그리고 나서 객체는 다시 매개 변수에서 공격을하는 것을 의미합니다 객체를 수행하는 것과 같이 정의 된 경우 무언가는 마치 무언가를 업로드 중일 때 무언가를 처리하고 있습니다 배낭은 물건을 짓고 오른쪽 공격과 주말을하는 경우에 정의됩니다 끝내고 여행하지 않으면 사용자는 현재 사용자와 함께 포스트 이동을 편집 할 수 있습니다 팔레스타인과 가을 포스트를 제외하고는 안된다면 유감 스럽다

선장이 필요로하는 규범을 알 필요가있다 경고 오류 상자가없는 경우 ETA를 약속 한 업데이트가 표시됩니다 너무 빨리 숨겨져 있지 않으면 달러 기호를 밑줄 것입니다 게시물이지만 9 번째 마크가 표시됩니다 개입에 대해 매우 높게 평가할 것입니다

비 숙련자이지만 칼리프가 아닌 경우 롱런이다 ID는 그렇지 않다 수직 벡터 그래서 그 독특한 업데이 트 게시물 메타 후 일부 값 첫 번째 값은 게시물 ID이므로 게시물 ID 벵골 공격 키는 고유 한 업데이트 불가 지론 여기 오두막에서의 느낌은 최고 가치가 더 나은 컨트롤이 될 수 있습니다 여기에서 우리가 처음으로 위생 처리하고 보호 할 수있는 매개 변수를 봅니다 힘의 종류에있어 첫 번째 매개 변수는 세 번째 값이 될 것입니다

넣고 나는 우리가 커스텀 지시자 커스텀 값을 얻고 있다고 생각한다 하나만 당나귀 존경 달러 기호로 설정할 수없는 사용자 정의 게시물 정확한 또는 아니면 도움을 줄 수있을 것입니다 가치 포스 업데이트 후에 업데이트 포스 사물 ID를 넣은 다음에해야합니다 HTML 또는 XML 태그의 제한을 묻는 것을 허용합니다 여기에서 우리가 함께하고자하는 소중한 사람들의 영역을 만들 수 있습니다

이걸 안에 넣으면 푸줏간 주인과 사분의 일을 다시 만날 수 있어요 타타 (Tata) 누군가가 밀을 죽일 때의 부분 카발 (kabal) 세미콜론 엔진이 이것을 옮긴다 업데이트 메가 박스 값을 업데이트하면 업데이트됩니다 지금까지 우리가 물건을 팔거나 무언가를 파는 경우에 그것을 정의했다 그렇다면 우리는 사과를 돌려 주거나 사과하지 않으면 그것을 편집 할 수 없습니다

이 값이이 WordPress 내에서 오는 것으로 확인되지 않았습니다 다른 문제 또는 해킹에서 다른 도메인으로 이동하지 않습니다 시도한 다음 다른 방법으로 저장하십시오 찾지 못할 것이라고 확신합니다 판매 후에 그것을 저장했다 나는 어쩌면 우리는이 경우 오류없이 페이지에 간다

내 YouTube 채널에 오신 것을 환영합니다 그 후 업데이트를 클릭하십시오 그렇게 생각하시면 Adam Edelen을 원하십니까? 미안해, 재 장전 패키지가 실제로 필요하다 우리가 YouTube 채널에 오신 것을 환영합니다 updated 나는 우리가 좋은 돈을 벌고 나쁜 수표를하는 것이 후회한다고 생각한다

이 문제는 약간 제거한 후 제거하고 업데이트 할 것입니다 현재 후보자가 아니기에 내가 받아 들일 수없는 소음이 전혀 없다 이상적인 게시물에 약간의 효과가 있는지 알려주세요 돌연변이 문제를 일으킨 다음 다시 돌아가서 원하는 것을 보여줄 것입니다 나는 이것이 시간이라고 확신하지 않는다

알았어 이상적인 고객 식용림 문제를 정확히 분석해 보자 끊임없이 에스토니아에 관해서는 추가 가장자리 직원은 페리 일과 동등하다 이렇게 커스텀 필드가 가치를 되풀이하는 것은 문제가되지 않습니다 우리가 사랑 스럽다는 야망을 전달한다는 것은 문제가 아닙니다 그것이 모든 미국의 의복을 보여준다면 목걸이

너는 이상하게도 거기에 없다 왜 7시에 비디오를 웅장하게 그만두 게합니까? 문제는 내가 당신에게 돌아올거야 문제는 그 해결책을 가지고있어 내가 여기서 TT 개월을 사용하고 있었으니 나는 너를 유일하게해야한다고 생각한다 다른 접시에서 사용하는 저녁 그 후에 양을보기 위해 바꾼다

여기서 얻으려면 여기에 추가하십시오 여기에 그것을 넣은 다음 앞에 넣으십시오 끝내고 아무것도 추가하고 업데이트 버튼을 클릭하면 모양이 회전합니다 그리고 잘하고 있다는 것을 알기 때문에 나는 다른 게임을 보여 드리겠습니다 제가 공부 한 것을 보았습니다

여기서 WP를 논 필드에 넣고 부티크를 여기에 넣으십시오 우리는 WB에 대한 WS 이름을 알고 있습니다 지금 업데이트하지 않으면 내가 전에 얻었던 것과 같은 오류가 당신이 여기에 넣었는지 확인하십시오 이 고유 한 이름은 교환 될 직후 다른 이름입니다 여기에 이제까지 ATP가 보이지 않고 물론 WP가 맞지 않을 수도 있습니다

더 이상 오류가 표시되지 않으므로 여기에 우리가 원하는만큼 상자를 추가 할 수 있도록 도와주세요 검은 색 체크 박스 입력 유형 체크 박스 '맞춤형 체크는 특별히 만들어졌습니다 대가로 기분이 좋지 않아야한다 내가 시스템 체크를 먹으면 나쁜 쉼표를 먹을거야 우리는 가치를 두어야 해 네

그런 다음 필름 복사 붙여 넣기를 저장해야합니다 여기에 연락처와 연락처가 있습니다 관습과 여기에 모든 것이 잘되면 우리가 해변을 알 수 있도록 우리가 여기에 체크 박스가 있지만 누군가가 문제를 해결하려고합니다 태그를 선택하거나 다음 줄을 선택하면 확인란이 선택됩니다 업데이트 게시물 ID 확인 작업이 조금이라도 있으면 같은 과정을 수행하십시오

체크 박스 린다는 장소 값을 같거나 솔리드합니다 우리가 여기에 넣어야 할 가치가 아닌 다른 것이 있다면 지금 X도들을 수있었습니다 이 밴 당겨 사실 우리는 지금 우리가 할 수 있도록 절대적으로 괜찮은 결정적입니다 쉽게 느리게 체크해라 그래서 우리는 노력해야한다

더블 잭팟의 백 옵션 입력 유형 및 이름이기도 함 그것은 a와 같다 그리고 잭을 가기 위해 차량 가치로서 국소 빈혈이 어디에있을 것이냐 사우디 아라비아 사람 주님 그리고 만약 그 값이 우리가 선택할 것인가 그것을 확인한 다음 나는 베일리가 될 것이다 그리고 지금 내가보기에 로이스가 확인하지 않기를 확인한다 선택을 취소하면 값이 false가됩니다

확인란을 선택하지 않습니다 그래서 이것은 라디오 박스를 추가하는 방법이며 여기 WP 편집기를 추가 할 수도 있습니다 그것은 별도의 튜토리얼이 될 것입니다 메타 상자는 고급 튜토리얼이 될 것입니다 그래서 다른 비디오 자습서 및 이제이 단위의 다음 부분에이 값을 표시해야합니다 제품 어디서든 원하는 곳 어디에서나 클릭 할 수 있습니다

당신이 원하는 여기에 공개 페이지 템플릿입니다 템플릿에 그것을 원한다 어떤 방식 으로든 표시하고 싶으면 루프 내에서 표시 할 수 있습니다 나는 기사를 올렸을 것이고 그 다음이 매개 변수와 함께 h1이라는 제목을 갖게 될 것입니다 텍스트 제목 아래 값은 메타에서 게시물 잘라 내기와 같습니다 그리고 나서 내가 실제로 스피드를 위해 친구가되었거나 페이징 된 것이 무엇이든간에 그렇게되지 않아야하지 않을까요? 우리는 슈퍼에 관한 글에서 왜 그렇게 될까요? 당신이 볼 수있는 것처럼 페이지별로 편집하지 마라 나는 타르에 여기있을 수있는 독점권이 없다

게임을 통해 정신에 갈 수 있고 여기에서 노래를 부르면됩니다 블랙베이스에서 멀리 떨어진 곳으로 들어갈 수 있고 검은 색 부분을 켜고 다른 페이지 게시물을 올리고 콘텐츠를 추가 할 수 있습니다 이 값을 추가 할 수 있으므로 추가 할 수 있습니다 같은 값으로이 매개 변수를 찾는 것과 같은 방식입니다 카파 라타 (Kappa Lata) 게시 ID와 동일하며 그 다음 맞춤 요소의 값과 체크 박스를 선택하면이 방법으로 어디에서나 에코 할 수 있습니다

조건부 검사 그래서 나는 당신이 그 일에 대해 얼마나 화가 났는지 이해할 것이라고 확신합니다 그리고 우리는 어떻게 그들의 가치를 표시 할 수 있습니까 그래서 현재 우리는 그것을 게시물에 사용하고 있습니다 프론트 엔드 값을 내부에 표시해야한다는 것을 알고 계실 것입니다 어느 쪽이든 콘텐츠 내용 풍선 풍선 이미지 갤러리 하나씩 팀은 당신이 심지어 손가락 하나의 페이지에서 그것을 할 수있는 조직되어 있습니다 여기 당신은 이것들을 양쪽 포스트입니다 그래서 여기에 우리는 가치를 부가 할 수 있습니다

나는 포스트 메타를 얻고 그 아이디어를 현재의 힘으로 그들과 평등하게 할 것이다 값을 클릭하고 여기서 고객 테이블의 값을 클릭하면 여기에서 echo x2 12 실제로 나는 그것을 해냈다 내가 옆으로 가면 한 페이지 만 내가 당신이 볼 게시물을 열면 각 게시물은 하나의 게시물입니다 그래서 실제로 가치가 없다 나는 지역을 모른다 그것은 파라 안녕하세요 야가미 그래서 우리는 홈 페이지에 갈 필요가있다, 그리고 우리는 단지 필요 안녕하세요 세상을 열려면 다음 페이지에있는 연방 단어가 있습니다

안녕하세요, 아니면 그냥 계속 클릭하십시오 안녕하세요 내 YouTube 채널에 오신 것을 환영합니다 세계는 여기 근처에 없기 때문에 포스트 페이지이지만 나중에 볼 수는 없다 다른 세상에서 도움을 받으려면이 버튼을 클릭하면됩니다

youtube 채널이 텍스트 상자 그리고 그것은 당신이 여기에 외계인을 넣을 수 있지만 내가 가질 수있다 당신이 내 증인으로 보았을 때 여기에 허락 해주었습니다 다시 그래서 당신은 내가 쉼표를 넣으면 마음에 들것을 추가 할 수 없다 IMGL SLC 공기가 잘 통한다 매우 그렇다

나는 II 오전이다 Associated photo 너무 간결한 형태로 혼자서 행복하게 지내기 만하면됩니다 신념을 동그라미로 바꾼다 나는 IP 영역 센터 편집을 평가하고 업데이트하고있다 알았어, 엄마가 빠져 나간다

나는 내가 콘테스트를 잘 알기를 좋아할 것 같아 나는 5-4 명의 사람들을 모르고 그것에 돌아 간다 자금 지원 페이지를 원하시면이 이메일을 볼 수있는 이미지가 표시됩니다 여기에서 미디어 라이브러리 링크를 넣을 수도 있습니다 우리는 도서관 비디오가 무엇이든간에 그것을 얻고 있습니다

그러나 우리는 그것을 클릭합니다 IMG 미적분 만 허용하므로 예고 할 것입니다 더 이상 매개 변수를 허용하지 않으려면이 매개 변수를 허용하십시오 추가하면 1 시간 안에 여기에서 할 수 있다고 생각합니다 그래서 현재는 II와 사본 입금 후 활성화 될 수 없습니다

나는 여러분에게 아래의 사람들에게 물어볼 수 있으며, 결승전이나 낡은 대회에서 잘 수행 할 수 있습니다 Franken에 가면 클릭 할 수 없으므로 지금 업데이트하십시오 링크에 맞춤 금속 상자를 추가하는 방법은 다음과 같습니다 옵션 상자 비디오 상자를 원하는만큼 드롭 다운하거나 추가 할 수 있습니다 ID와 제목을 변경하는 중 여러 항목을 추가 한 다음 호출 함수를 호출하면 어쨌든 여기 에나 여기에 더할 수 있습니다

아주 아주 기본으로 설정하면 컨텍스트에 설정되어 있습니다 정상적인 사이트이며 정상적으로 작동 할 것입니다 그것이 여기에서 움직일 것이고 옹호자가 그렇게 비틀어 져서 내가 정부 화석 아래서도 내가 추가 할 전체 요소를 얻을 수있다 예, 멋진 욕실을 정상적으로 우리는 공격적으로 가지고 있습니다 당신이 볼 수있는 값이며 이것은 우리가 할 수있는 텍스트의 에테르에서 공격받을 수 있습니다

무대 뒤에서 여자애처럼 만들 수 있습니다 명확하고 텍스트 경고 매개 변수에 의해 흡연자가하지 않는 식사가 없다 타일 ​​타일 수집은 우리가 가진 예제 터널 호출에서 또 다른 역할을 제공해야합니다 늦게까지 채우고 이제 텍스트 영역이 생기므로 이것을 볼 수 있습니다 많은 금속 상자가 다른 종류의 금속 상자처럼 노동자들 속에서 나는 분명히 확신합니다 이 비디오 자습서와 같은 경우와 같은 버튼을 눌러 고려하시기 바랍니다 더 많은 다가오는 비디오를 보려면 내 채널을 구독하십시오

앞으로 전달 사전 및 이들은 우리가 얻을 첫 번째 비디오 튜토리얼 포인트 고급 사용자는 맞춤 설정을 원하거나 자신의 곡을 만들지 여부 또는 그들이 저글링을 만들고 있고 그들에게 책을 사용하고 싶다면 그것에 많은 작업을했습니다 특히 많은 그룹의 비디오를 만들었습니다 WordPress 및 WooCommerce 서버는이 점을 잘 지켜 주셔서 대단히 감사합니다 비디오를 딜레마에 빠뜨리지 마라

Automated Customer Emails for WooCommerce on WordPress

– 안녕, 수요일 다른 WordPress에 오신 것을 환영합니다 제 이름은 San Antonio의 WebTegrity에서 Ashton입니다

우리가 방금 지나갔다고 말하면 너무 기쁩니다 이 놀라운 YouTube 채널에서 조회수 2 백만 회 그 모든 것들 WordPress에 전념하고 있습니다 그리고 우리는 단지 2 만 5 천명의 가입자입니다 정말 놀라워! 우리 채널에 가입 해 주셔서 대단히 감사합니다 모든 WordPress 수요일의 일부가되고있다

개선 할 수 있도록 동영상을 만들고 있습니다 귀하의 온라인 마케팅은 전적으로 무료입니다 그리고 아시는 바와 같이 무료는 항상 예산에 있습니다 이제 다른 리소스를 찾아 보겠습니다 그것은 같은 무료 예산에 있습니다

MailChimp에 대해 이야기하고 싶습니다 여러분 중 일부가 MailChimp에 익숙하다면, 그것은 이메일 마케팅, 일종의, 폭발 캠페인 도구를 사용하면 폭발을 보낼 수 있습니다 Constant Contact와 비슷한 수준입니다 또는 캠페인 모니터, 그 무리 밖에있는 다른 사람들은 알지만, 내 채널을 보면 MailChimp가 내 즐겨 찾기 중 하나입니다! 내 말은,이 작은 녀석을 봐 그러나 그들은 위의 단계를 밟았습니다

그들은 이제 통합을 만들었습니다 MailChimp for WooCommerce 자, 너희들, 모자를 쥐고, 이 기능들 중 일부는 마음이 울릴 것입니다 그리고 다시, 이것은 모두 무료 예산입니다 이제 MailChimp 계정을 가지고 있어야합니다

그래서 당신은 그들과 함께 그 계정을 지불하게 될 것입니다 그러나이 유형을 허용하는이 특정 플러그인 통합의 필요성을 느낄 수 있습니다 모든 기능은 무료입니다 자, 살펴보고 그들이 무엇을하고 있는지 보도록하겠습니다 그리고 그들이 할 수 있었던 일

이것은 훌륭한 비디오입니다, 그런데, 이 페이지의 링크를 설명에 넣을 것입니다 아래 상자를 클릭하면 확인할 수 있습니다 하지만, 그들이 말하는 것들 중 하나 MailChimp가 자동으로 생성한다는 것입니다 고객에게 제안 된 항목을 보낼 수있는 자동화 된 전자 메일 내가 무슨 말하는지 이해 했니? 당신은 그것을 할 필요가 없습니다! 허가를 얻는 것뿐이에요

MailChimp가이 이메일을 발송합니다 귀하의 웹 사이트에서 제품을 가져오고, 당신을 위해 이메일에 넣어, 그리고 그것을 밖으로 폭발 모든 가입자 또는 고객에게 이미 귀하의 사이트에 있습니다 그들은 버려진 카트를 위해서도 그것을 할 것입니다 이것은 믿기 힘든 일이야! 혹시 전자 상거래 상점이 있다면 당신은 그 중에서도 가장 나쁜 것들 중 하나를 알고 있습니다 버려진 장바구니에 앉아있다

그 고객을 어떻게 다시 얻게 되나요? 그들은 이것들을 신용 카드에 넣는 것에 가까웠습니다 이 시스템은 알림을 보냅니다 "이봐, 니가이 스웨터를보고 있었다 "장바구니에 있습니다 지금 클릭 하시겠습니까?" 이 도구는 정말 멋진 도구이며 완전히 자동화되었습니다

당신은 그것을 망칠 필요가 없습니다 너를 잡을 수있게 해줄거야 정말 멋진 분석 및 고객 데이터, 잠재 고객을 이해할 수 있도록 Google 애널리틱스가 허용하는 것보다 훨씬 더 많은 기능을 제공합니다 제발, 제발, 이것 좀 봐 멋진 방문 페이지 및 모두보기, 그리고 저는이 모든 것들을 보았습니다

왜냐하면 나는 단지 한 쌍 얘기하고있어 그들이 여기에있어 MailChimp와 WordPress가 정말 놀랍습니다 함께 모여서 당신을 위해 준비하십시오 다시 말하지만, 모두 무료 예산으로 제공됩니다

그래서, 너들, 나는 링크를 걸거야 아래의 설명 상자에 있습니다 어떤 종류의 드립 캠페인을 설정하려고한다면 또는 버려진 카트 솔루션, MailChimp는 WooCommerce 상점을위한 것일 수도 있습니다 네가 좋은 사람이되기를 바란다 나는 워드 프레스 수요일, 다음에 모두 보자!