웹 사이트의 헤더 영역에 WordPress 위젯을 추가 하시겠습니까?
위젯을 사용하면 WordPress 테마의 지정된 섹션에 콘텐츠 블록을 쉽게 추가 할 수 있습니다.
이 튜토리얼에서는 웹 사이트의 헤더에 WordPress 위젯을 쉽게 추가하는 방법을 보여줍니다.
주의 사항: 이것은 중급 수준의 튜토리얼입니다. 코드를 추가해야합니다. 워드 프레스 테마 파일 CSS를 마스터하십시오.
그러나 수정하기 전에 백업 블로그에 5 워드 프레스 플러그인 또는 워드 프레스 테마를 설치하는 방법 et 얼마나 많은 플러그인 나는 워드 프레스에 설치해야.
그런 다음 왜 우리가 여기 있는지 다시 돌아 갑시다.
왜 그리고 언제 헤더에 위젯을 추가해야합니까?
위젯을 사용하면 WordPress 테마의 지정된 영역에 콘텐츠 블록을 쉽게 추가 할 수 있습니다. 이러한 지정 영역을 " 사이드 바 "또는 영역" 위젯".
헤더의 위젯 영역을 사용하여 광고, 최근 기사 또는 원하는 항목을 표시 할 수 있습니다.
이 특정 도메인은 모든 중요한 웹 사이트에서 실제로 중요한 정보를 표시하는 데 사용됩니다.
너무 발견 WordPress에 게시 한 후 사용자 정의 위젯을 추가하는 방법
일반적으로 워드 프레스 테마 콘텐츠 옆이나 바닥글 영역에 사이드바를 추가합니다. 콘텐츠 위나 헤더에 위젯 영역을 추가하는 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 ".
탭« 추가 CSS " 사용자 정의 오른쪽에있는 미리보기에서 변경 사항을 확인하면서 사용자 정의 CSS를 추가 할 수 있습니다.
이 학습서 고유의 이유로,이 영역을 사용하여 단일 위젯을 추가하여 배너 광고 또는 사용자 정의 메뉴 위젯을 표시한다고 가정합니다.
다음은 시작하기위한 CSS의 예입니다.
DIV 번호 헤더 - 위젯 영역 {폭 : 100 %의; 배경 색상 : #f7f7f7; 국경 - 하단 : 고체 #eeeeee를 1px; 텍스트 정렬 : 센터; } H2.chw 제목 {마진 - 맨 : 0px; 텍스트 정렬 : 왼쪽; 텍스트 - 변환 : 대문자; 폰트 크기 : 작음; 배경 색상 : #feffce; 폭 : 130px; 패딩 : 5px; }
맞춤 위젯이 Twenty Seventeen 테마 헤더에 표시되는 방법은 다음과 같습니다.
프리미엄 워드 프레스 플러그인도 만나보세요
당신은 다른 것을 사용할 수 있습니다 워드 프레스 플러그인 현대적인 외관을 제공하고 블로그 또는 웹사이트의 처리를 최적화합니다.
우리는 여기에 당신을 도울 수있는 프리미엄 WordPress 플러그인을 제공합니다.
1. Smart4y 툴팁
Smart4y 툴팁은 워드 프레스 플러그인 Javascript 라이브러리에 의존하지 않고 최신 툴팁을 만드는 데 전념하는 유연한 도구입니다. 그것은 완전히 반응하며 HTML 콘텐츠를 삽입할 수 있는 가능성을 제공합니다.
WYSIWYG 편집기를 사용하면 코드를 입력하지 않고도 각 툴팁을 시각적으로 만들 수 있지만 언제든지 원하는대로 수행 할 수 있습니다.
또한 우리의 발견 블로그에서 기사를 평가하는 10 WordPress 플러그인
다른 기능은 다음과 같습니다. 빌더 페이지 지원, 상당히 반응이 빠른 레이아웃, 모든 도구 설명에 대한 전역 매개 변수를 정의하거나 각 도구 설명에 대한 특정 매개 변수를 정의하는 기능, 미리 정의 된 시각 효과 지원, 크기 조정 된 창에서 도구 설명의 위치 계산, 자세한 문서 등….
다운로드 | 데모 | 웹 호스팅
2. 정당화
Le 워드 프레스 플러그인 Justified는 Flickr와 같이 jQuery를 사용하여 정렬된 격자에 축소판을 정렬하는 반응형 갤러리 플러그인입니다.
갤러리를 경쟁 업체의 갤러리와 구별 할 수있는 기능을 제공합니다!
주요 기능은 반응 형 레이아웃, 특수 플라이 오버 효과, 자동 그리드 재정렬, 단축 코드 편집기, 외관 e완벽하게 사용자 정의 가능, p의 지원시청자와 많은 다른 사람…
3. 전자 메일 예약
ce 워드 프레스 플러그인 이름에서 알 수 있듯이 웹사이트에 이메일 게시를 예약할 수 있습니다. 이는 "내 블로그 게시물 팔로우" WordPress 플러그인 확장의 일부입니다.
이제 시간, 일 또는 주 단위로 이메일 게시를 예약 할 수 있습니다.
에 대한 기사를 읽으십시오 웹 사이트에서지도를 사용하는 10 WordPress 플러그인
각 알림에 대해 각 이메일 대신 모든 알림에 대해 결합 된 이메일을 보낼 수있는 가능성을 제공하고 또한 다른 이메일에 대해 서로 다른 이메일 템플릿을 정의하여 최종적으로 이메일 수신을보다 쉽게 이해할 수 있도록합니다. .
추천 자료
웹 사이트 구축 및 관리에 도움이되는 기타 권장 리소스에 대해 알아보십시오.
- 워드 프레스에 엑셀과 워드 문서를 작성하는 방법
- 대시 보드의 워드 프레스 로고를 사용자 정의하는 방법
- 워드 프레스 테마를 편집 할 수있는 파일을 찾는 방법
- WordPress 웹 사이트의 CSS를 사용자 정의하는 방법
결론
그게 다야! 이것이이 튜토리얼의 전부입니다. WordPress 테마의 헤더에 위젯 영역을 추가하는 데 도움이되기를 바랍니다. 주저하지 마십시오 좋아하는 소셜 네트워크에서 친구들과 공유.
그러나 귀하는 우리와 상담 할 수 있습니다. 능숙, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작.
제안이나 의견이 있으면 섹션에 남겨주세요 commentaires.
...
안녕하세요! "다운로드"및 "워크 시트"옆에있는 클릭 가능한 버튼을 포함하여이 문서의 시작 부분에 사용 된 것과 유사한 "정보 상자"를 넣는 방법을 알려 주실 기회가 있는지 알고 싶습니다. 레이아웃이 아주 좋습니다. 감사합니다!
header.php를 추가하는 코드가 작동하지 않습니다.
선생님, 시도했습니다. 실제로 위젯 페이지는 위젯 추가를 정의하는 출력입니다. 그리고 그것을 추가했습니다. 2 단계가 php 헤더에 코드를 입력하지 못한 경우. 2 번을 맞춰보세요. 실수가 무엇인가요?
새 위젯 영역을 생성하는 첫 번째 코드에서 "function"을 입력하여 시작하지만 "function"으로 시작한다고 말할 것입니다. 실제로이 코드에는 작성하는 동안 잘못 만드는 몇 가지 오류가 있습니다. 수정 해주셔서 감사합니다.
좋아요.
🙂 모든 것이 괜찮습니다. 그들의 조언에 아무도 "functions.php !!!"에 코드를 추가 할 위치를 설명하지 않습니다. " 그건 중요해! 모든 사람이 "다른"테마를 사용합니다…
안녕하세요
이러한 지원에 감사드립니다.
개인화 된 헤더에 내 검색 창을 추가하는 방법을 알고있었습니다. 반면에 스타일을 개인화하려면 더 복잡합니다 ...
크기, 위치 (헤더의 전체 너비를 차지하지 않는) 및 배경색을 변경하고 싶습니다.
Merci d' avance.
안녕 토마스,
그것은 약간의 CSS 지식을 필요로합니다. 하지만이 우수한 WordPress 플러그인을 사용하는 것이 좋습니다. https://codecanyon.net/item/yellow-pencil-visual-css-style-editor/11322180?ref=voirplusgrand