WordPress에서 동적 위젯을 만드는 방법

WordPress 위젯을 사용하면 웹사이트를 동적으로 만들고 방문자와 효과적으로 상호 작용할 수 있습니다. 사용할 수 있는 WordPress 위젯이 많이 있습니다. 그러나 맞춤형 WordPress 위젯을 생성하면 선택한 코드를 WordPress 웹사이트에 추가하는 데 도움이 됩니다.

대부분의 모든 웹사이트는 동적 위젯을 사용하여 사용자 경험을 향상시키고 다른 목적을 위해 사용하고 있습니다. WordPress 위젯을 사용하여 연락처 양식, 로그인 양식, 구독 카드, 실시간 추적 및 기타 여러 기능을 웹사이트에 만들 수 있습니다.

위젯을 만드는 것은 쉽고 이 게시물을 통해 더 쉽게 만들 수 있습니다. 따라서 시간을 낭비하지 않고 WordPress에서 동적 위젯 생성을 시작하겠습니다.

 

WordPress에서 동적 위젯을 만드는 방법

이 게시물에서는 이 주제를 크게 세 부분으로 다룰 것입니다.

 

1부: 시작하기 전에 몇 가지 이해

동적 WordPress 위젯을 만드는 방법을 배우기 전에 몇 가지 사항을 알아야 합니다.

이러한 것들은 위젯의 기본과 WordPress에서 동적 위젯이 구성되는 방식과 관련이 있습니다. 많은 도움이 될 것이기 때문에 이 부분을 무시하거나 무시하거나 건너뛰려고 하지 마십시오.

이 부분을 빌딩 블록으로 간주하십시오. 단, 워드프레스 위젯, 코딩, 플러그인, 기능 등에 익숙하신 분들은 넘어가셔도 됩니다.

 

WordPress 위젯이란 무엇입니까?

WordPress 위젯은 작은 블록이며 이 블록은 WordPress 웹 페이지 어딘가에 배치됩니다.

위젯을 사용하여 아무 것도 코딩하지 않고 고유한 콘텐츠와 기능을 방문자에게 제공할 수 있습니다. 약간의 워드프레스 코딩만으로도 위젯을 만들 수 있습니다.

구독 상자 팝업, 알림, 연락처 양식 팝업, 라이브 데이터 업데이트 등은 WordPress 웹마스터가 사용하는 일반적인 위젯입니다.

 

정적 위젯

정적 위젯은 단방향 통신만 있기 때문에 사용자와의 상호 작용이 없습니다. 변경되지 않는 정보를 제공하거나 간단한 방법으로 사용자로부터 정보를 수집하는 데 사용됩니다.

 

동적 위젯

동적 위젯은 사용자와 효과적으로 상호 작용하며 다양한 API를 사용하여 업데이트되는 데이터를 제공합니다. 또한 이러한 위젯은 동적으로 사용하면서 정보를 수집합니다. 완전한 자동화 기능이 동적 위젯에 있습니다.

 

복합성

요즘 대부분의 웹사이트는 정적 위젯과 동적 위젯을 조합하여 사용합니다. 이러한 위젯에서는 동적 기능과 함께 정적 정보를 제공합니다. 

 

알아야 할 사항

이제 WordPress 위젯과 그 유형에 익숙해졌습니다. WordPress는 사용자에게 많은 내장 위젯을 제공합니다. 그러나 사이트에 맞춤형 WordPress 위젯을 만들고 싶다면 다음이 필요할 수 있습니다. 

 

기본 코딩

PHP의 기본 OOP(객체 지향 프로그래밍)에 익숙해야 합니다. 

 

원본 코드 백업

WordPress 코드를 가지고 놀게 될 것임을 명심하십시오. 문제를 방지하려면 원본 WordPress 코드를 백업해야 합니다.

 

코드 배치

WordPress 위젯은 코드로 개발되지만 이러한 코드는 어디에 배치됩니까? WordPress 테마의 위젯 코드를 배치할 수 있습니다. Functions.php 파일. 이 위젯은 테마를 활성화하면 활성화됩니다.

 

WordPress 위젯 기본 사항

워드프레스는 다음을 제공합니다  WP_위젯  동적 위젯을 생성하는 클래스입니다. 동적 WordPress 위젯을 만들기 위한 요구 사항에 따라 더 많은 기능을 추가하여 이 클래스를 확장해야 합니다. 다음은 추가할 수 있는 네 가지 기본 기능입니다.   WP_위젯   클래스입니다.

• 생성자 함수.
• 위젯 콘텐츠를 표시하기 위해 우리는  위젯 기능.
• 위젯의 설정을 업데이트하려면 다음을 사용합니다.  업데이트 기능.
• 사용자로부터 정보를 수집하기 위해 당사는 다음을 사용합니다.  형태 기능.

동적 위젯에서는 이 네 가지 위젯 기능 중 일부를 사용합니다. 그런 다음 다음을 사용하여 위젯을 등록합니다.  Register_widget. 

 

파트 2: WordPress용 동적 위젯 만들기

WordPress용 동적 위젯을 만드는 것은 긴 과정입니다. 처음 하시는 분들은 복잡하게 느껴지실 수도 있지만 간단하게 만들었습니다.

전체 프로세스를 네 가지 간단한 단계로 나누었습니다. WordPress용 동적 위젯을 만들려면 다음 네 가지 간단한 단계를 따르세요.

 

1단계: 빈 플러그인 생성

첫 번째 단계는 WordPress 위젯용 빈 플러그인을 만드는 것입니다. 이 단계는 간단하고 쉽습니다. 플러그인이나 위젯을 만든 적이 있다면 전에 본 적이 있을 것입니다.

이 플러그인에 위젯을 추가한 다음 해당 플러그인을 WordPress 사이트에 추가하기 때문에 플러그인을 만들고 있습니다.

이렇게 하려면 다음으로 이동해야 합니다.  /wp-콘텐츠/플러그인/. WordPress 사이트용 플러그인을 생성하는 동안 새 디렉토리를 추가한 다음 그에 따라 이름을 지정해야 합니다.

원하는 대로 이름을 지정할 수 있습니다. 디렉토리에서 다음을 생성해야 합니다.   index.php.   이 색인 파일에는 다음 샘플 코드가 있습니다.

위에서 언급한 빈 플러그인의 모든 세부 정보는 WordPress에서 관리자 패널에 플러그인 세부 정보를 표시하는 데 사용됩니다. 이 코드를 추가한 후 빈 플러그인을 만듭니다. WordPress 관리자 패널에서 볼 수 있습니다. 이제 이 플러그인을 활성화해야 합니다.

 

2단계: 샘플 위젯 코드 생성

두 번째 단계는 샘플 위젯 코드를 만드는 것입니다. 우리는 네 가지 기본 기능을 사용하여 사용성을 확장할 것입니다.  WP_위젯  클래스입니다.

class Example_Widget extends WP_Widget { public function __construct() { } public function widget( $args, $instance ) { // 샘플 위젯 생성 } } // 위젯 등록 function register_sample_widget() { register_widget( 'My_Custom_Widget' ); } add_action( 'widgets_init', 'register_sample_widget' );

위의 코드 섹션에서 다음을 볼 수 있습니다.  WP_위젯 구성 기능을 사용하여 확장됩니다. 블록의 마지막 부분에서 샘플 위젯을 어떻게 등록했는지 확인할 수 있습니다.  Register_widget. 

샘플 위젯을 생성하여 등록한 후 동적 기능을 추가해야 합니다. 우리는 사용할 수 있습니다  위젯,  형성 및  업데이트 우리의 요구 사항에 따라 작동합니다.

보너스 팁 : 스타일 세부 정보를 추가하려면 CSS를 사용할 수 있습니다.  수업   HTML DOM에 추가할 수 있으며 전체 위젯의 표시 스타일을 지정합니다. 

 

3단계: 페이지에 위젯 추가

코딩 부분을 마친 후. 페이지에 위젯을 추가할 수 있습니다. 아직 위젯에 동적 정보나 데이터 소스를 추가하지 않았다는 점을 기억하세요.

동적으로 만들려면 동적 정보 소스를 추가해야 합니다. 우리는 다음 단계에서 그것을 할 것입니다. 지금은 새로 생성된 사용자 지정 위젯을 WordPress 사이트 페이지에 추가합니다.

페이지에 추가하려면 WordPress 관리자 패널로 돌아와야 합니다. 거기 당신은에 가야합니다 외관 사이드 바에서 옵션. 이동 외모>위젯.

여기에서 머리글, 바닥글, 사이드바 등과 같은 페이지의 아무 곳에나 위젯을 추가할 수 있습니다.

 

4단계: 위젯에 동적 데이터 추가

이제 절반 이상의 프로세스가 완료되었습니다. 위젯에 동적 데이터를 추가할 시간입니다. 모든 소스에서 동적 데이터를 가져올 수 있습니다.

예를 들어 전 세계의 실시간 COVID-19 사례를 표시하는 위젯을 만드는 경우 WHO 또는 미디어 사이트와 같은 웹사이트에서 데이터를 가져와야 합니다.

정보의 URL을 가져오고 추가하십시오.  API 키 그것에. 이제 위젯 "GET" 명령과 함께 기능을 사용하면 COVID-19의 실시간 세부 정보를 얻을 수 있습니다(예제에 따름).  

API 키 "GET" 요청과 함께 위젯의 데이터 또는 정보를 가져와 표시합니다. JSON 문자열 및 변수에 대한 도움을 받아 위젯에서 데이터를 업데이트하세요.

 

5단계: 플러그인 업로드

필요한 모든 코드를 추가하면 위젯을 미리 볼 수 있습니다.

이제 마지막 단계는 WordPress 관리자 패널에 플러그인을 업로드하는 것입니다. 이를 위해 플러그인을 zip 파일로 압축해야 합니다. 이제 이동 플러그인 > 새로 추가 > 플러그인 업로드 플러그인을 업로드합니다.

 

파트 3: 요소, 플러그인, 위젯을 한 곳에서 가져오기

플러그인, 위젯 및 요소를 만들고 추가하는 것이 어려워 보입니까? 걱정하지 마세요. 좋은 소식은 요즘 수동으로 아무것도 할 필요가 없다는 것입니다.

많은 사람들이있다 WordPress 테마, 플러그인 및 위젯을 사용할 수 있습니다. 대부분의 요구 사항은 이러한 기성품 겸 사용자 정의 위젯으로 충족될 수 있습니다. 다음은 사용 가능한 최상의 옵션입니다.

 

Deep 워드 프레스 테마

XNUMXD덴탈의 Deep WordPress 테마 The Webnus에서 제공하는 것은 프리미엄 WordPress 테마, 요소, 플러그인 등을 얻을 수 있는 최고의 옵션 중 하나입니다. 이 모든 것을 사용하여 WordPress 웹사이트에 동적 위젯을 배치할 수 있습니다. 다음은 당신이 얻을 수있는 최고의 기능 중 일부입니다 deep Webnus의 워드프레스 테마.

 

스피드 부스터

페이지의 추가 코드는 페이지 로딩 속도에 영향을 미칩니다. 그러나이 테마로 로드할 추가 코드가 없습니다. 그러면 페이지가 더 빨리 로드됩니다. CSS 및 JS 요소는 페이지의 소스 코드에 로드됩니다. 따라서 더 적은 코드로 더 원활하게 로드됩니다.

 

슈퍼 리스폰스

웹 페이지에서 향상된 사용자 경험을 얻을 수 있습니다. 향상된 UX는 사이트 방문자에게 뛰어난 응답 기능을 제공하는 데 도움이 됩니다.

 

손쉬운 사용

Deep 테마 임포터는 매우 쉽고 빠르게 사용할 수 있습니다. 테마를 WordPress 웹사이트로 가져오는 동안 매우 편안하고 편리한 방식으로 작업할 수 있습니다.

 

정품 가격

를 사용하면 많은 비용을 절약할 수 있습니다. deep Webnus의 워드프레스 테마. 모든 테마, 플러그인은 정품 가격으로 제공됩니다.

 

요약하자!

이번 포스팅에서는 동적 워드프레스 위젯이 무엇이고 어떻게 생성하는지 알아보았습니다.

데이터 추가에서 기본 위젯 생성에 이르기까지 전체 프로세스의 모든 측면을 다루었습니다. 이 게시물에 언급된 단계를 따르면 쉽게 동적 워드프레스 위젯을 만들 수 있습니다.

또한 Webnus에서 기성 플러그인, 위젯, 요소 등을 얻을 수 있음을 알게 되었습니다. 사용하는 동안 시간과 비용을 절약할 수 있습니다. deep Webnus의 워드프레스 테마.