개발노트

워드프레스 사이트 개발관련 개발팁을 정리해 두었습니다.

Categories

최종수정일: 2023-02-24

Oxygen Dynamic Slider

다이내믹 슬라이더 높이조절하기 Sider Container의 .oxel_dynamicslider__container의 Size & Spacing에서 Height를 조절

최종수정일: 2023-02-15

Isolation 속성

CSS에서 isolation 속성은 요소의 콘텐츠가 주변 요소와 격리되는 정도를 제어하는 데 사용됩니다. isolation 속성에는 세 가지 가능한 값이 있습니다. auto - 이것은 기본값이며 요소의 콘텐츠가 부모 요소의 배경의 일부로 칠해지고 […]

최종수정일: 2022-10-04

ACF Relationship 필드 개수 가져오기

<?php echo $item_count = count(get_field('field_name_of_relationship')); ?>

최종수정일: 2022-09-26

ACF Relationship Fields를 Repeater로 Query 하기

1. Relationship 필드 설정 - Return Format : Post Object 2. Repeater Query : Advanced Query post_type = 해당 post type slug post__in : data > Advanced Custom Fields > […]

최종수정일: 2022-09-15

워드프레스 카테고리에서 링크를 삭제하는 방법

방법 1 : Code Block을 이용한 방법 - TEXT <?php echo strip_tags( get_the_term_list( get_the_ID(), 'my_taxonomy', '', ', ' ) ) ?> 방법2 : Code Block을 이용하는 또 다른 방법 -DIV […]

최종수정일: 2022-09-09

워드프레스에서 카테고리 일괄변경 작업

1. 우선 일괄변경하고자 하는 글이나 포스트들을 선택합니다. 2. 위 메뉴 중 "편집"을 선택한 후 [적용]버튼을 클릭합니다. 3. 그러면 편집창이 나타나는 데 카테고리 뿐만 아니라, 태그, 글쓴이 등도 일괄 변경이 가능합니다.

최종수정일: 2022-09-05

Repeater에 ACF 필드에 따른 순서를 부여하는 방법

예를 들어, order_value라는 필드를 생성한 후 이를 높은 순서대로 배열하고자 한다면, Advanced Query에서 'orderby' => 'meta_value', 'meta_key' => 'order_value' 로 설정하면 된다.

최종수정일: 2022-07-01

Metabox Group 이미지에 대한 소스코드

ADD THIS TO THE PHP & HTML SECTION OF THE CODE BLOCK: <?php global $meta_box_current_group_fields; $image_src = wp_get_attachment_image_src($meta_box_current_group_fields['tool_image'][0], "full")[0]; ?> <img class="mb-image__img" src="<?= $image_src; ?>"> ADD THIS TO THE CSS […]

최종수정일: 2022-04-15

Easy Text Columns

최종수정일: 2022-04-14

웹사이트에서 커스텀 아이콘 사용하는 방법

아이콘을 만들 이미지를 SVG 포맷으로 저장하여 아이코문에서 불러오기 아이콘을 만들 이미지를 SVG 포맷으로 저장합니다. 이때, 저장할 이미지가 선(Stroke) 형태가 아닌 면(Fill)의 형태로 저장되어야 합니다. 그 다음 아이콘으로 만들기 위해 아래의 […]

최종수정일: 2022-04-03

Oxy Extras - Countdown Timer

혹시 카운트 다운 타이머가 제대로 표시되지 않을 때에는 Custom Fields 의 Display format을 Custom : Y/m/d로 변경해 볼 것.

최종수정일: 2022-01-31

리스트 요소에 자동카운터 넘버 삽입 방법

부모요소에 counter-reset: li; 속성부여 custom tag를 이용하여 div를 ul 요소로 바꾸고 적절한 클래스 명을 부여한 다음 다음의 CSS 코드를 추가합니다. 자식요소의 :before 에 content 및 content-increment 속성부여 자식요소에 적절한 클래스 […]

최종수정일: 2021-12-31

Off Canvas

일반적 Workflow off-canvas component를 적절한 요소내 삽입 Primary > Click selector : 기본적으로 Oxy Burger Trigger의 클래스로 설정되어 있음. 다른 것으로 하고 싶으면 다른 커스텀 클래스로 변경해야 함. Primary > […]

최종수정일: 2021-10-22

OxyExtras - Mega Menu Options

메가메뉴 만들기 8단계 헤더빌더 안에 메가메뉴 추가하기 필요한만큼 Dropdowns 추가하기 Dropdown 안에 Elements 나 Slide menu 추가하기 Mega Menu 스타일링 : Padding / Colors / Widths / Reveal Animation 필요시 […]

최종수정일: 2021-10-02

Oxy Extras - Carousel Builder

In-Editor Mode Preview와 Edit 모드가 있음. Edit 모드는 기본 모드로서 캐러셀 빌더 안의 모든 Elements들을 자유롭게 편집할 수 있음. Preview 모드에서는 모든 캐러셀 기능들이 실제로 동작을 함. Preview 모드에서는 Oxygen […]

최종수정일: 2021-10-02

Mega menu with Oxy Extra

1. Add Mega Menu inside Header Builder Header Builder 안에 "Add Mega Menu" 2. Add a number of dropdowns inside Mega Menu > Add New Dropdown Mega Menu / Dropdown […]

최종수정일: 2021-09-24

isotope filter animation 속도 조정하기

최종수정일: 2021-09-07

런대쉬에서 인증서 한글폰트 적용하는 방법

런대쉬 인증서 한글출력시 발생되는 문제 LearnDash 인증서에 한글이 모두 물음표(???????)로만 표시되어서 당황하신 경험이 있으신가요? 가장 일반적인 이유는 PDF 생성에 사용되는 기본 글꼴이 특정 특수 문자를 지원하지 않기 때문입니다. 그래서 인증서에 […]

최종수정일: 2021-09-05

로그아웃 링크만들기

링크 > data > phpfunction > wp_logout_url 로 설정할 것

최종수정일: 2021-08-29

Change wp-config.php permission

sudo chown -R bitnami:daemon /bitnami/wordpresssudo find /bitnami/wordpress/ -type d -exec chmod 775 {} \;sudo find /bitnami/wordpress/ -type f -exec chmod 664 {} \;sudo chmod 640 /bitnami/wordpress/wp-config.php Really Simple SSL 플러그인 […]

최종수정일: 2021-08-05

Oxygen Dynamic Data에서 PHP Function Return value 이용하는 방법

Function Name과 Function Arguments (separated by comma)로 되어 있는데, Function Name에 WordPress의 Function Reference를 참고하여 활용할 수 있습니다. 예를 들어, 저자의 이메일 정보를 불러오려면, Function Name에, get_the_author_meta 를 입력하고, Function […]

최종수정일: 2021-07-25

숏코드에 ACF 필드를 이용하기

코드블락을 이용하여 아래 코드에서 do_shortcode('["'.get_field('field_name').'"]');를 참고하여 숏코드에 동적 필드를 대입할 수 있습니다. 예를 들어, 라고 가정할 때, mp3에 대한 필드를 audio_mp3라는 필드로 만들고 로 만듭니다.

최종수정일: 2021-07-23

UL/Lists 에 Custom Bulllets를 세팅하는 방법

먼저 아래와 같은 HTML 코드가 있다고 가정하면, 먼저, 기존 불릿을 감추고 :before를 사용해서 새로운 불릿을 만들어 보겠습니다.

최종수정일: 2021-06-23

Scroll Trigger

Code Block 을 이용해서 Javascript 섹션에 gsap.registerPlugin(ScrollTrigger); 한 줄을 입력해야 함.

최종수정일: 2021-06-20

ACF Repeater 이미지 Display 방법

Insert Dynamic Data에서 Advanced > PHP Function Return value 에서 Function Name : get_sub_field Function Arguments : 해당 필드의 Field Name을 입력합니다. 이때 ACF Repeater의 Return Image Format 은 Image […]

최종수정일: 2021-06-07

이미지 카드를 만드는 방법

Div를 만들고 BG 이미지로 이용하는 방법은 2가지의 문제점이 있음. srcset 이미지를 활용할 수 없음 SEO 차원에서 Image에 Alt text 를 부여할 수 없음 따라서, 이미지에게 Width 값과 Height 값을 부여한 […]

최종수정일: 2021-06-05

DMARC

Here’s what this rule does: This DMARC example tells the server to send a report by email if SPF or DKIM fail the server’s checks. We’re using p=none because it’s the least […]

최종수정일: 2021-06-05

Amazon SES 에서 SPF를 사용하여 이메일 인증

Sender Policy Framework(SPF)는 이메일 스푸핑 방지를 위해 마련된 이메일 검증 표준입니다. 기존 SPF 레코드가 없는 경우, 다음 값의 TXT 레코드를 게시합니다. 레코드의 이름은 DNS 서비스에 따라 공백이거나 @일 수 있습니다. […]

최종수정일: 2021-06-05

Let's Encrypt 설치 후 Really Simple SSL 설치방법

AWS SSH로 아래의 명령어를 실행하여, wp-config.php와 htaccess 파일이 쓰기가능하도록 변경해주어야 합니다.

최종수정일: 2021-05-21

NOTO SANS KR 웹폰트 적용

다국어 페이지는 html에서 콘텐츠의 언어를 'lang' 태그로 명시하고 다음을 스타일 시트에 더하시면 됩니다.

최종수정일: 2021-05-14

라이트세일 phpmyadmin 접속방법

https://yourdomain/phpmyadmin을 통해서 접속을 하면 되지만, 비트나미는 원천적으로 외부 접속을 막아놓은 상태이므로 이를 먼저 풀어주어야 합니다. 이를 위해서는 /opt/bitnami/apps/phpmyadmin/conf 경로의 httpd-app.conf 파일을 수정해야 합니다. 아래와 같이 Required local을 주석 처리하고 "Require all […]

최종수정일: 2021-05-14

default 스킨 제목길이 조절

KBoard 게시판 플러그인의 게시글 목록 페이지에서 제목 글자 수를 제한하시려면 FTP로 접속해서 /wp-content/plugins/kboard/skin/사용중인스킨/list.php 파일에 아래의 코드를 찾아서 아래의 코드로 교체합니다. 위의 코드에서 10 부분은 적절한 글자 수로 조절해서 적용해보세요. (대략 […]

최종수정일: 2021-05-08

Animated Border Effect

https://codepen.io/vulchivijay/pen/yyxyvB

최종수정일: 2021-05-08

Custom Dropdown Megamenu

우선 메뉴를 감싸는 Megamenu Container를 만들고 그 안에 여러개의 Link Wrapper를 이용하여 메뉴를 구현, 이 때 각각의 Link Wrapper와 그 안의 텍스트는 클래스를 부여하여 일괄적으로 Control 할 수 있도록 함. […]

최종수정일: 2021-05-07

옥시젠 빌더 이미지 왜곡현상 수정

아래의 코드를 코드 스니핏을 이용해서 적용함

최종수정일: 2021-04-24

How To Make A Smart Search Results Template For WordPress With Oxygen

아래 코드를 Code Snippet > Add New 로 하여 <?php 바로 아래 줄에 삽입합니다. 상기 코드를 생성하면, Condition에서 Search Result Condition을 적용할 수 있게 됨.

최종수정일: 2021-04-23

Disable Woocommerce Image Zoom

Code Snippet에 다음의 CSS를 적용 선택자는 이미지 검사를 통해 확인하면 됨.

최종수정일: 2021-04-23

글로벌 세팅방법 (Automatically Responsive!)

How to Setup Oxygen: Best Global Settings (Automatically Responsive!) - YouTube 스타일시트 생성 및 아래 CSS 적용If you do not specify a font size, the default size for normal text, like paragraphs, is 16px […]

최종수정일: 2021-04-15

구글 애널리틱스 추적코드 삽입 - Code Snippet

최종수정일: 2021-04-12

런대쉬 포커스모드 사용하는 방법

런대쉬의 포커스 모드는 아래 4가지의 포스트 타입에 적용됩니다. (Courses에는 적용되지 않음) Lessons Topics Quizzes Assignments 포커스 모드를 사용하려면, 상기 4개의 포스트 타입에 적용할 Template을 생성해야 합니다. Template Priority를 조절하여 상기 […]

최종수정일: 2021-03-31

배경에 패턴 오버레이 올리는 CSS

예를 들어 섹션에 배경이미지 위해 멋진 오버레이 패턴을 올리고 싶다면 해당 섹션의 CSS 편집창에 다음의 코드를 삽입합니다. background 속성에 url(패턴이미지 경로) repeat, url(배경이미지 경로) center; background-size 속성에 적절한 px값과 cover속성을 […]

최종수정일: 2021-03-31

Modal Scroll issue 해결

아래의 코드를 스크롤을 해야하는 Modal 요소의 Javascript 섹션에 붙여넣기 합니다.

최종수정일: 2021-03-31

풀스크린 오버레이 메뉴 만들기

단계 1. 햄버거 버튼 만들기 가장 첫번째로 CSS 스타일 시트를 생성해야 합니다. 링크를 이용해서 할 수도 있지만 필요한 CSS만 포함되도록하여 CSS 파일을 생성하는 것이 더 좋습니다. 아래는 .hamburger--spin을 적용한 CSS입니다. […]

최종수정일: 2021-03-31

Using Isotope To Sort & Filter Posts In WordPress With Oxygen

Repeater 생성 및 .grid 부여 Repeater > Div 생성 및 .grid-item 부여 Repeater > Div > (Sorting Target Element) 에 원하는 class 지정 Repeater > Div > Code Block 생성 […]

최종수정일: 2021-03-31

smartslider3 이미지 깨지는 문제 해결

이미지의 링크주소중 $upload$/ 부분을 실제 사이트 주소 경로로 변경하여 줍니다.

최종수정일: 2021-03-31

Smooth scroll Back-to-top

jQuery : 버튼요소에 적용 Back-to-Top 기능을 적용할 버튼의 Advanced 메뉴의 Javascript 항목에 아래의 코드를 적용합니다.jQuery('#%%ELEMENT_ID%%').off('click');jQuery('#%%ELEMENT_ID%%').click(function() {document.body.scrollTop = 0; // For Safaridocument.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera}); […]

최종수정일: 2021-03-31

웹페이지 인쇄하기 [jQuery]

기능을 연결할 요소(예를 들면 button)를 선택하고 Advanced Option의 Javascript 값에 아래의 코드를 입력해 줍니다. jQuery('#%%ELEMENT_ID%%').off('click');jQuery('#%%ELEMENT_ID%%').click(function() {window.print();}); 해당 버튼의 URL 값은 #을 입력해 주도록 합니다.

최종수정일: 2021-03-31

System detection encountered issues 해결방법

wp-config.php 파일이 쓰기 불가능하다는 오류가 발생했을 경우 대처방법 : sudo chmod 664 /opt/bitnami/apps/wordpress/htdocs/wp-config.php 를 실행한 후 아파치를 재시작 해줍니다. sudo /opt/bitnami/ctlscript.sh restart apache 권한을 변경해 주는데 chmod +w로 했더니 해결되지 […]

최종수정일: 2021-03-31

Feeds for Youtube 플러그인 z-index 문제 해결

Smash Balloon의 회신내용 Try adding the following CSS to Feeds for YouTube > Customize > Custom CSS: [id^=sb_youtube_].sb_youtube .sby_play_btn, [id^=sb_youtube_].sb_youtube .sby_video_thumbnail {z-index:0!important;}

최종수정일: 2021-03-31

::before ::after에 fontawesome을 적용하는 방법

1. FA CDN 주소 가져오기 https://fontawesome.com/account/cdnFA 홈페이지에 접속해서 CDN 주소를 가져와서 적용할 페이지에 삽입합니다. (안해되 되는 지 테스트중)또는, FontAwesome 플러그인을 활성화합니다. 2. 필요한 FA Icon 찾기 https://fontawesome.com/icons?d=gallery&m=freeFA 홈페이지에서 필요한 아이콘을 […]

최종수정일: 2021-03-31

아마존 라이트세일 샌드박스 환경에서 나오기

For Use case description, explain how you plan to use Amazon SES to send email. To help us process your request, you should answer the following questions: How do you plan […]

최종수정일: 2021-03-31

글꼴크기가 가변적인 제목만들기

clamp() 속성을 이용하여 글꼴크기가 Container의 사이즈에 따라서 유동적으로 변하도록 할 수 있습니다. clamp() 속성은 최소값, vw값, 최대값의 3가지 속성을 설정합니다. media (max-width: )는 page-width 값을 참조하여 설정합니다. 상기 설정에서 vw값은 […]

최종수정일: 2021-03-31

비트나미 배너제거방법

비트나미로 워드프레스를 구축하면 우측 하단에 비트나미 배너가 보여집니다. 이를 제거하고자 하면 아래의 명령어를 수행합니다.

최종수정일: 2021-03-31

비트나미 퍼미션 조정

비트나미 파일 업로드 등을 위한 퍼미션을 조정하려면 chown 과 chmod 명령어를 사용합니다. 예를 들어, /opt/bitnami/apps/wordpress/htdocs/wp-content/uploads/2020/07 경로의 폴더의 권한을 수정하려면 아래의 명령어를 수행합니다. 작업을 마치면, 다시 원래대로 퍼미션을 돌려놓아야 합니다. 위의 […]

최종수정일: 2021-03-31

배경이미지에 패턴오버레이 입히기

먼저 Patternify에 가서 패턴을 생성한 후 PNG 이미지를 다운로드합니다. http://www.patternify.com/ 오버레이를 적용하고자하는 Element의 before: 섹션에 다음의 CSS를 삽입합니다. 이때 적용대상이 되는 요소의 layout position은 relative로 설정해야 합니다. 만약 컬러를 삽입하고 […]

최종수정일: 2021-03-30

필드가 나타나는 검색아이콘 만들기

구성 DIV 내에 code block, search form, icon 으로 구성 CSS 분석 /* 검색엘리먼트의 submit 타입에 대한 아이디를 확인한 후 display를 none으로 설정 */#searchsubmit {display: none;} /* 검색엘리먼트의 입력창의 아이디를 […]