최근 독자 중 한 명이 WordPress 테마의 사이드 바 측면을 변경하는 방법을 물었습니다.

일반적으로 사이드 바의 위치를 ​​왼쪽에서 오른쪽으로 또는 오른쪽에서 왼쪽으로 변경하려는 사용자로부터이 질문을받습니다.

이 자습서에서는 WordPress에서 사이드 바의 위치를 ​​변경하는 방법을 보여줍니다.

그러나 이전에 WordPress discover를 설치 한 적이 없다면 워드 프레스 블로그 7 단계를 설치하는 방법 et 어떻게 찾아 설치하고 블로그에 워드 프레스 테마를 활성화하려면 

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

워드 프레스 e1568058176266에서 사이드 바 위치를 변경하는 방법

WordPress에서 사이드 바의 위치를 ​​변경하는 이유는 무엇입니까?

사용성 전문가들은 사람들이 페이지를 왼쪽에서 오른쪽으로 스캔한다고 믿습니다. 사용자가이 콘텐츠를 먼저 볼 수 있도록 중요한 콘텐츠를 왼쪽에 배치하는 것이 좋습니다. 그러나 웹 사이트가 RTL 언어 (왼쪽에 오른쪽).

여부를 알아보십시오 WordPress 블로그에 사이드 바가 있어야합니다

많은 WordPress 웹 사이트는 두 개의 열이있는 일반적인 블로그 레이아웃을 사용합니다. 하나는 콘텐츠 용이고 다른 하나는 사이드 바용입니다.

데모 내용 일반적인 워드 프레스 사이드 바

웹 사이트를 처음 사용하는 경우 원하는 위치에 사이드 바가있는 WordPress 테마를 선택해야합니다.

많은 워드 프레스 테마 사이드바 설정에서 사이드바 측면을 변경하는 옵션을 제공합니다. 그러나 WordPress 테마에이 옵션이없는 경우 사이드 바 측면을 수동으로 변경해야합니다. 발견하여 더 나아가십시오 워드 프레스에서 사이드 바를 제거하는 방법

CSS를 사용하여 WordPress의 사이드 바 측면을 쉽게 변경하는 데 필요한 방법을 살펴 보겠습니다.

CSS로 사이드 바 변경

WordPress 테마를 변경하기 전에 먼저 어린이 테마 만들기. 하위 테마를 사용하면 변경 사항을 잃지 않고 상위 테마를 업데이트 할 수 있습니다.

발견 워드 프레스의 각 항목에 대해 다른 사이드 바를 표시하는 방법

둘째, 활성 테마를 실시간으로 변경할 때 항상 WordPress 웹 사이트의 백업을 만들어야합니다.

WordPress 테마 파일을 편집하려면 FTP 클라이언트가 필요합니다. 상담 FTP를 사용하는 방법에 대한 안내.

FTP 클라이언트를 사용하여 WordPress 웹 사이트에 로그인하고 테마 폴더로 이동하십시오. 일반적으로 다음 위치에 있습니다.

 / Yoursite / WP - 콘텐츠 / 테마 / 당신의-테마 폴더 / 

이제 메모장과 같은 텍스트 편집기에서 WordPress 테마의 기본 스타일 시트 파일을 다운로드하여 열어야합니다. 이 파일은 style.css이며 WordPress 테마의 루트 디렉토리에 있습니다.

발견 워드 프레스 파일 및 폴더를 관리하는 방법

이 파일에서 사이드 바의 CSS 클래스를 찾으십시오. 일반적으로이 수업은 " 사이드 ". 이 예에서는 기본 WordPress 테마 " 스물 다섯 사이드 바에 대한이 클래스를 가진 사람 :

.sidebar {float : 왼쪽; 오른쪽 여백 : -100 %; 최대 너비 : 413px; 위치 : 상대; 폭 : 29.4118 %; }

보시다시피 사이드 바는 여백 -100 %로 왼쪽으로 뜹니다. 플로트를 오른쪽으로 변경합니다 :

.sidebar {float : 오른쪽; 왼쪽 여백 : -100 %; 최대 너비 : 413px; 위치 : 상대; 폭 : 29.4118 %; }

FTP 클라이언트를 사용하여 변경 사항을 저장하고 style.css 파일을 웹 사이트에 업로드하십시오. 이제 웹 사이트를 방문하면 다음과 같이 보입니다.

데모 웹 사이트는 사이드 바 변경

실제로, 우리는 사이드 바를 옮겼지만 컨텐츠 영역을 옮긴 것은 아닙니다. " 스물 다섯 이 CSS를 사용하여 컨텐츠 영역의 위치를 ​​정의하십시오.

.site-content {디스플레이 : 블록; 플로트 : 왼쪽; 왼쪽 여백 : 29.4118 %; 폭 : 70.5882 %; }

콘텐츠를 오른쪽으로 이동하도록 변경하겠습니다. 다음과 같이 :

.site-content {디스플레이 : 블록; 플로트 : 왼쪽; 오른쪽 여백 : 29.4118 %; 폭 : 70.5882 %; }

이 CSS 코드를 적용한 후 웹 사이트 모양은 다음과 같습니다.

새로운 프레젠테이션으로 사이드 바 웹 사이트 이동

보시다시피 콘텐츠 영역과 사이드 바의 위치가 변경되었습니다. 그러나 왼쪽에는 여전히 흰색 블록이 있습니다.

발견하여 더 나아가십시오 워드 프레스 파일 및 폴더를 관리하는 방법

CSS로 작업 할 때 종종 이러한 오류가 발생합니다. 이 문제의 원인과 해결 방법을 이해하려면 탐정 작업이 필요합니다.

소스 코드를 보려면 브라우저의 "Inspector"도구를 사용하십시오. 브라우저에서 영향을받는 영역을 마우스로 가리키고 마우스 오른쪽 버튼을 클릭 한 다음 브라우저 메뉴에서 "Inspector"를 선택합니다.

브라우저 도구를 검사

소스 코드보기에서 마우스를 움직이면 라이브 미리보기에서 강조 표시된 영역이 표시됩니다. 오른쪽 창에서 선택한 요소에 사용 된 CSS를 볼 수 있습니다.

우리의 발견 블로그에서 시각적으로 CSS를 편집하는 5 WordPress 플러그인

따라서 강조 표시된 항목에 해당하는 CSS를 다시 조정해야합니다.

@ 미디어 화면 및 (최소 너비 : 59.6875em) {body : 전 {배경색 : #fff; 상자 그림자 : 0 0 1px rgba (0, 0, 0, 0.15); 내용 : ""; 디스플레이 : 블록; 높이 : 100 %; 최소 높이 : 100 %; 위치 : 고정; 상단 : 0; 왼쪽 : 0; 폭 : 29.4118 %; z- 색인 : 0; / * Safari에서 스크롤 할 때 깜박이는 버그 수정 * /}

이 CSS 코드는 왼쪽 위에 29,4118 % 너비와 100 % 너비의 빈 블록을 추가합니다. 다음은 오른쪽으로 이동하는 방법입니다.

@ 미디어 화면 및 (최소 너비 : 59.6875em) {body : 전 {배경색 : #fff; 상자 그림자 : 0 0 1px rgba (0, 0, 0, 0.15); 내용 : ""; 디스플레이 : 블록; 높이 : 100 %; 최소 높이 : 100 %; 위치 : 고정; 상단 : 0; 오른쪽 : 0; 폭 : 29.4118 %; z- 색인 : 0; / * Safari에서 스크롤 할 때 깜박이는 버그 수정 * /}

스타일 시트를 저장하고 서버에 업로드 한 후 웹 사이트는 다음과 같이 표시됩니다.

오른쪽에 새로운 모습의 웹 사이트 사이드 바

CSS 작업은 초보자에게 혼란을 줄 수 있습니다. 모든 수동 작업을 원하지 않으면 다음을 시도해보십시오. 워드 프레스 CSS Hero 플러그인. 코드를 작성하지 않고도 CSS를 편집 할 수 있으며 모든 WordPress 테마에서 작동합니다.

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

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

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

1. Zxeion

Zxeion은 강력한 워드 프레스 플러그인 귀하의 웹사이트 보안 향상을 책임지는 프리미엄. 이 플러그인에는 가능한 공격으로부터 웹사이트를 보호하는 보호 및 보안 도구 모음이 포함되어 있습니다.Zxeion 워드 프레스 플러그인은 맬웨어 바이러스 공격으로부터 사이트를 보호합니다.

실시간 보호 시스템을 사용하면 웹 사이트에 대한 위협을 식별하고 아무런 조치를 취하지 않고도이를 차단할 수 있습니다.

또한 우리의 발견 워드 프레스에서 사이드 바를 향상시키는 7 가지 플러그인

기능은 다음과 같습니다. 실시간 보호, 우수한 고객 지원, 정기 업데이트, IP 주소 차단기, 우수한 문서화, 현대적이고 전문적인 인터페이스, 전용 고객 지원 및 기타

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

2. Slaido 

슬라이도는 워드 프레스 플러그인 거의 320개의 반응형 슬라이더 템플릿 중에서 선택하고 몇 번의 클릭만으로 그 중 하나를 웹사이트로 가져올 수 있는 프리미엄입니다. 완벽한 템플릿 팩입니다. 슬라이더 혁명. 따라서 이 기능을 완전히 사용하려면 먼저 설치해야 합니다. 워드 프레스 플러그인슬라이더 혁명 워드 프레스를위한 Slaido 템플릿 팩

주요 기능은 다음과 같습니다. 슬라이더의 반응 형 레이아웃, 슬라이더 가져 오기 또는 내보내기의 용이성, 정기 업데이트, 연중 무휴 고객 지원, 유동적이고 멋진 애니메이션, 가용성 빠른 시작, Google 글꼴 지원 등을위한 비디오 자습서.

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

3. 문의 양식

Contact Us Form은 프리미엄 반응 형 WordPress 플러그인이자 간단한 도구이지만 사용자 지정 옵션이 풍부하여 방문자가 메시지를 남기고 연락 할 수있는 명확하고 고무적인 양식을 표시 할 수 있습니다.

문의 양식 워드 프레스 문의 양식 플러그인

필요한 필드를 정의하고 필드의 최상의 레이아웃을 선택한 후 고객이나 방문자가 제안이나 메시지를 남기도록 완전히 사용자 정의 할 수 있습니다.

우리는 또한 당신이 읽을 것을 초대합니다 : 레스토랑 웹 사이트를 만들고 관리하기위한 10 WordPress 플러그인

메시지를받을 이메일 주소를 설정하고 가장 수익성 높은 방향으로 비즈니스를 성장시키는 데 사용하십시오.

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

추천 자료

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

결론

여기에! 이 튜토리얼은 끝났습니다. WordPress 블로그의 사이드 바 측면을 변경하는 데 도움이되기를 바랍니다. 주저하지 말라. 이 기사를 좋아하는 소셜 네트워크에서 친구들과 공유하십시오

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

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

...