웹 사이트의 헤더 영역에 WordPress 위젯을 추가 하시겠습니까?

위젯을 사용하면 WordPress 테마의 지정된 섹션에 콘텐츠 블록을 쉽게 추가 할 수 있습니다.

이 튜토리얼에서는 웹 사이트의 헤더에 WordPress 위젯을 쉽게 추가하는 방법을 보여줍니다.

주의 사항: 이것은 중급 수준의 튜토리얼입니다. 코드를 추가해야합니다. 워드 프레스 테마 파일 CSS를 마스터하십시오.

그러나 수정하기 전에 백업 블로그에 5 워드 프레스 플러그인 또는 워드 프레스 테마를 설치하는 방법 et 얼마나 많은 플러그인 나는 워드 프레스에 설치해야.

그런 다음 왜 우리가 여기 있는지 다시 돌아 갑시다. 

왜 그리고 언제 헤더에 위젯을 추가해야합니까?

위젯을 사용하면 WordPress 테마의 지정된 영역에 콘텐츠 블록을 쉽게 추가 할 수 있습니다. 이러한 지정 영역을 " 사이드 바 "또는 영역" 위젯".

헤더의 위젯 영역을 사용하여 광고, 최근 기사 또는 원하는 항목을 표시 할 수 있습니다.

이 특정 도메인은 모든 중요한 웹 사이트에서 실제로 중요한 정보를 표시하는 데 사용됩니다.

너무 발견 WordPress에 게시 한 후 사용자 정의 위젯을 추가하는 방법

WordPress의 헤드에서 영역 widgetisee

일반적으로 워드 프레스 테마 콘텐츠 옆이나 바닥글 영역에 사이드바를 추가합니다. 콘텐츠 위나 헤더에 위젯 영역을 추가하는 WordPress 테마는 거의 없습니다.

우리는 또한 발견하는 것이 좋습니다 프랑스어로 메일 침프 튜토리얼 : 뉴스 레터를 만들 수있는 완전한 가이드

그렇기 때문에이 튜토리얼에서는 WordPress 웹 사이트의 헤더에 위젯 영역을 추가하는 방법을 보여줍니다.

1 단계 : 위젯 영역 만들기

우선 사용자 정의 위젯 영역을 만들어야합니다. 이 단계에서는 "에서 사용자 정의 위젯 영역을 볼 수 있습니다. 외관> 위젯 워드 프레스 대시 보드에서.

이 코드를 파일에 추가해야합니다 functions.php 당신의 테마.

function bpc_widgets_init () {register_sidebar (array ( 'name'=> 'Custom Header Widget Area', 'id'=> 'custom-header-widget', 'before_widget'=> ' ','after_widget '=>' ','before_title '=>' ','after_title '=>' ',)); } add_action ( 'widgets_init', 'bpc_widgets_init');

이 코드는 WordPress 테마에 새로운 사이드 바 또는 위젯 영역을 저장합니다.

WordPress를 로컬에 설치 한 적이 없다면 XAMPP와 PC에 로컬로 워드 프레스를 설치하는 방법 / 윈도우

"로 갈 수 있습니다 외관> 위젯 그리고 ""라고 표시된 새로운 위젯 영역이 표시됩니다 사용자 지정 헤더 위젯 지역 ".

새로운 워드 프레스 위젯 영역

계속해서 새로 만든이 영역에 텍스트 위젯을 추가하고 저장하십시오.

시도해보십시오 위젯 추가에 대한 가이드.

2 단계 : 헤더에 위젯 표시

웹 사이트를 방문하면 방금 추가 한 텍스트 위젯을 볼 수 없습니다.

아직 영역을 표시하는 방법을 보여주지 않았기 때문에 맞춤 위젯 워드 프레스.

이것이 우리가이 단계에서 할 것입니다.

여기 또한 당신을위한 목록입니다 5 Critical WordPress 플러그인으로 블로그 수입 증대

파일을 편집해야합니다 header.php WordPress 테마에서 위젯을 표시하려는 위치에이 코드를 추가하십시오.


 
 
 
 

변경 사항을 저장하는 것을 잊지 마십시오.

그런 다음 웹 사이트를 방문하면 헤더에 텍스트 위젯이 표시됩니다.

마음에 데모 사이트

결과가 반드시 가장 매력적인 것은 아닙니다. 그렇기 때문에 CSS가 올바르게 표시되도록 CSS가 필요합니다.

3 단계 : CSS 헤더에 스타일 제공

WordPress 테마에 따라 헤더 및 위젯 영역이 표시되는 방식을 제어하기 위해 일부 CSS 코드를 추가해야합니다.

이를 수행하는 가장 쉬운 방법 중 하나는 CSS Hero를 사용하는 것입니다. 후자는 직관적 인 사용자 인터페이스를 사용하여 WordPress 테마의 CSS를 수정할 수 있습니다.

우리는 또한 이것을 발견하는 것이 좋습니다 Yellow Pencil WordPress 플러그인으로 무엇을 할 수 있습니까?

플러그인을 사용하지 않으려면 "페이지를 방문하여 WordPress 테마에 사용자 정의 CSS를 추가하십시오 외관»개인화 워드 프레스 테마를 사용자 정의합니다.

에 대한 기사를 읽으십시오 블로그 트래픽을 개선하는 10 WordPress 플러그인

그러면 WordPress Customizer 인터페이스를 표시 할 수 있습니다. "를 클릭해야합니다. 추가 CSS ".

추가 WorDPress CSS

탭« 추가 CSS " 사용자 정의 오른쪽에있는 미리보기에서 변경 사항을 확인하면서 사용자 정의 CSS를 추가 할 수 있습니다.

이 학습서 고유의 이유로,이 영역을 사용하여 단일 위젯을 추가하여 배너 광고 또는 사용자 정의 메뉴 위젯을 표시한다고 가정합니다.

다음은 시작하기위한 CSS의 예입니다.

DIV 번호 헤더 - 위젯 영역 {폭 : 100 %의; 배경 색상 : #f7f7f7; 국경 - 하단 : 고체 #eeeeee를 1px; 텍스트 정렬 : 센터; } H2.chw 제목 {마진 - 맨 : 0px; 텍스트 정렬 : 왼쪽; 텍스트 - 변환 : 대문자; 폰트 크기 : 작음; 배경 색상 : #feffce; 폭 : 130px; 패딩 : 5px; }

맞춤 위젯이 Twenty Seventeen 테마 헤더에 표시되는 방법은 다음과 같습니다.

데모 테마 20 17 wordpress

프리미엄 워드 프레스 플러그인도 만나보세요  

당신은 다른 것을 사용할 수 있습니다 워드 프레스 플러그인 현대적인 외관을 제공하고 블로그 또는 웹사이트의 처리를 최적화합니다.

우리는 여기에 당신을 도울 수있는 프리미엄 WordPress 플러그인을 제공합니다.

1. Smart4y 툴팁

Smart4y 툴팁은 워드 프레스 플러그인 Javascript 라이브러리에 의존하지 않고 최신 툴팁을 만드는 데 전념하는 유연한 도구입니다. 그것은 완전히 반응하며 HTML 콘텐츠를 삽입할 수 있는 가능성을 제공합니다.

Smart4y Tooltip 반응 형 WordPress 플러그인

WYSIWYG 편집기를 사용하면 코드를 입력하지 않고도 각 툴팁을 시각적으로 만들 수 있지만 언제든지 원하는대로 수행 할 수 있습니다.

또한 우리의 발견 블로그에서 기사를 평가하는 10 WordPress 플러그인

다른 기능은 다음과 같습니다. 빌더 페이지 지원, 상당히 반응이 빠른 레이아웃, 모든 도구 설명에 대한 전역 매개 변수를 정의하거나 각 도구 설명에 대한 특정 매개 변수를 정의하는 기능, 미리 정의 된 시각 효과 지원, 크기 조정 된 창에서 도구 설명의 위치 계산, 자세한 문서 등….

다운로드 | 데모 | 웹 호스팅

2. 정당화

Le 워드 프레스 플러그인 Justified는 Flickr와 같이 jQuery를 사용하여 정렬된 격자에 축소판을 정렬하는 반응형 갤러리 플러그인입니다. 

워드 프레스 - 사진 작가 정당화 - 플러그인,

갤러리를 경쟁 업체의 갤러리와 구별 할 수있는 기능을 제공합니다!

주요 기능은 반응 형 레이아웃, 특수 플라이 오버 효과, 자동 그리드 재정렬,  단축 코드 편집기, 외관 e완벽하게 사용자 정의 가능, p의 지원시청자와 많은 다른 사람…

다운로드 | 데모 | 웹 호스팅  

3. 전자 메일 예약

ce 워드 프레스 플러그인 이름에서 알 수 있듯이 웹사이트에 이메일 게시를 예약할 수 있습니다. 이는 "내 블로그 게시물 팔로우" WordPress 플러그인 확장의 일부입니다. 이메일 예약 내 블로그 게시물을 따라 WordPress 플러그인

이제 시간, 일 또는 주 단위로 이메일 게시를 예약 할 수 있습니다.

에 대한 기사를 읽으십시오 웹 사이트에서지도를 사용하는 10 WordPress 플러그인

각 알림에 대해 각 이메일 대신 모든 알림에 대해 결합 된 이메일을 보낼 수있는 가능성을 제공하고 또한 다른 이메일에 대해 서로 다른 이메일 템플릿을 정의하여 최종적으로 이메일 수신을보다 쉽게 ​​이해할 수 있도록합니다. .

다운로드데모 |웹 호스팅

추천 자료

웹 사이트 구축 및 관리에 도움이되는 기타 권장 리소스에 대해 알아보십시오.

결론

그게 다야! 이것이이 튜토리얼의 전부입니다. WordPress 테마의 헤더에 위젯 영역을 추가하는 데 도움이되기를 바랍니다. 주저하지 마십시오 좋아하는 소셜 네트워크에서 친구들과 공유

그러나 귀하는 우리와 상담 할 수 있습니다. 능숙, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작.

제안이나 의견이 있으면 섹션에 남겨주세요 commentaires.

...