본문 바로가기

디지털노마드/WordPress 강좌

 (18)
워드프레스에 자바스크립트 링크하는 방법 워드프레스 대쉬 아이콘과 wp_enqueue_script 사용하기 워드프레스 개발자 사이트에 들어가면 다양한 대쉬 아이콘들을 볼 수 있습니다. 여기서는 웹 사이트 하단에 닻 태그 아이콘을 만들어 링크 걸어주는 내용을 다루겠습니다. 먼저 워드프레스 대쉬 아이콘을 검색해 봅시다. developer.wordpress.org/resource/dashicons/#color-picker WordPress Developer Resources | Official WordPress Developer Resources Official WordPress developer resources including a code reference, handbooks (for APIs, plugin and theme developmen..
웹페이지에 구글맵 넣는 간단한 방법 HTML 태그로 간단히 입력하기 1. 구글맵(www.googlemap.com)에 가서 원하는 주소를 입력한 후 검색을 해봅시다. 아래와 같이 '남산타워'를 검색한 경우 아래와 같은 지도가 보입니다. 여기서 'Share' 버튼을 눌러봅시다. 2. 아래와 같은 팝업창이 열리면 여기서 '지도 퍼가기'를 누릅니다. 중간에 HTML 태그가 보이면 복사를 합니다. 3. 작업하고 있는 워드프레스의 작업창으로 가서 블럭에디터를 선택합니다. 여기서 'Embed' 또는 'Custom HTML' 을 누릅니다. 그리고 앞에서 복사해둔 구글맵 코드를 붙여넣습니다. 4. 저장하고 웹페이지를 확인해 봅시다. 간단하게 구글맵을 적용해 보았습니다. HTML 태그에서 크기를 조절해서 웹페이지 스타일을 맞춰 봅시다. 다음 글에서는 구글맵..
WP_Query 사용해서 데이터 호출하기 홈페이지에 원하는 데이터를 부르고 싶을때 WP_Query 를 사용할 수 있습니다. WP_RESET_POSTDATA () 커스텀 루프에서 WP_Query 사용자 지정 루프는 기본 쿼리 개체를 변경합니다. 불러줄 개체가 없으면 에러가 날 수 있으니 taxonomy 를 만들어 불러 주도록 합시다. 아래와 같이 포스트에 저장된 사진 데이터를 호출해 홈페이지에 적용해 봅시다. 웹페이지에 WP_Query 코드 입력하기 1. 아래의 코드를 front-page.php 파일에 입력합니다.
CPT (Custom Post Types) 만들기 커스텀 포스트 타입은 페이지 구분을 할때 일반 페이지와 글 포스트로 구분 할 수 있는데, 아래와 같은 구분을 생각하고 작업하면 도움이 됩니다. 쉽게 말해 블로그글은 포스트, 일반 페이지는 페이지로 구분할 수 있습니다. 커스텀 포스트 유형 게시물 또는 페이지 역할을 할 수 있습니다. 카테고리, 태그 또는 사용자 지정 분류별로 구성 인덱스 페이지를 분리해서 사용하고 사용자 지정 템플릿을 가질 수 있습니다. 표준 기능을 모두 포함하거나 조합하거나 포함하지 않을 수 있습니다. WP_Query ()를 사용하여 사용자 정의 루프를 사용하여 사이트 어디에서나 표시 할 수 있습니다. 커스텀 페이지 등록 코드와 등록방법 커스텀 페이지 등록코드 register_post_type( string $post_type, arra..
컨텐츠 부르기와 글 길이 줄이기 블럭에디터에서 글을 작성한것을 부르는 태그는 글이 너무 긴 경우 메인페이지에서 컨텐츠를 호출할때는 를 사용합니다. 예를 들어 메인 홈페이지 또는 블로그 메인 페이지에서 저장된 포스트들의 글을 미리보기 할때 사용합니다. 아래글은 메인 페이지에 보여지는 이미지 입니다. 컨텐츠의 일부만 보이고 'continue reading' 을 눌러 볼 수 있게 되어 있습니다. 코드를 사용시 각 포스트의 single 페이지에서는 컨텐츠가 그대로 보여야 하므로 아래와 같이 태그를 입력합니다. Zubin theme 의 경우 아래와 같이 the_excerpt(); 코드가 정해져 있습니다. 여기서 보여진 길의 길이를 조절하고 싶다면 zubin_excerp-length의 숫자 30을 조절해 주면 됩니다. 문자 길이 10 일때 문자 ..
ACF 텍스트 필드 활용해서 페이지 꾸미기 Advancedcustomfields 는 다양한 영역에 활용할 수 있는데 가장 강력한것 사용자가 스타일 시트를 적용해 자유롭게 꾸며줄 수 있는 부분입니다. 블럭에디터나 기타 플러그인들은 사용자가 조절하기 힘든 부분들이 많이 있지만 ACF 필드는 웹개발자가 코드를 사용해 꾸며줄 수 있어서 편리합니다. 홈페이지에 가보면 아래와 같이 다양하게 적용해 볼 수 있는 필드 타입들이 있습니다. 플러그인을 다운받아 사용해 보세요. www.advancedcustomfields.com/resources/ ACF | Resources, Documentation, API, How to & Tutorial Articles We use cookies to offer you a better browsing experience, a..
ACF - Advanced Custom Fields 로 주소 입력하기 ACF 필드를 사용하면 워드프레스 페이지를 보다 다이나믹하게 사용할 수 있습니다. 플러그인을 여러개 사용하면 편리하지만 자바스크립트나 스타일시트를 적용하는데에 한계가 있기 때문에 보다 창의적으로 작업을 원하는 개발자들이 많이 사용하는 플러그인 입니다. 여기서는 간단한 주소 입력칸을 만들고 PHP를 조절해 페이지에서 부르는 작업을 해보겠습니다. 플러그인 설치 및 적용 1. 플러그인 메뉴를 선택하고 Add New -> ACF 를 검색합니다. 아래와 같은 아이콘이 보이면 Install Now -> Activate를 선택해 설치해 줍니다. 2. 플러그인을 설치하면 아래와 같은 메뉴가 생깁니다. Custom Fields -> 'Add New' 를 선택합니다. 3. Custom Fields 메뉴를 선택하고 Add ..
워드프레스 홈페이지의 테마를 맞춤 제작(커스터마이즈)하기 워드프레스에서는 페이지와 글을 손쉽게 만들 수 있습니다. 그리고 또한 PHP 코드를 이용해 홈페이지에 다른 페이지의 정보를 불러 올 수 있습니다. 먼저 간단하게 페이지를 맞춤 제작( 커스터 마이즈) 하는 방법을 알아보도록 합시다. 홈페이지에서 다른 페이지의 데이터를 부르는 방법 1. 먼저 page.php 파일을 복사하고 복사한 파일의 이름을 front-page.php 로 바꾸어 줍니다. 2. front-page.php 코드를 열어봅시다. 아래와 같은 page.php 의 기본 코드만 들어있습니다. 웹페이지에서 보면 홈페이지의 파일이 front-page.php 로 바뀌어 있는것을 볼 수 있습니다. 3. 앞에서 만든 front-page.php 의 코드를 수정해 봅시다. 아래와 같이 태그안에 php 코드를 입력..

티스토리툴바