이 문서에서는 다음 개요를 사용하여 WordPress에 진행률 표시줄을 추가하는 절차를 제공합니다.
- WP의 진행률 표시줄이란 무엇입니까?
- 코드를 사용하여 WordPress 웹 사이트에 진행률 표시줄을 추가하는 방법은 무엇입니까?
- 플러그인을 사용하여 WordPress 웹사이트에 진행률 표시줄을 추가하는 방법은 무엇입니까?
WordPress의 진행률 표시줄은 무엇인가요?
진행률 표시줄은 가로 막대를 사용하여 특정 항목의 진행률을 백분율로 표시합니다. 사용자에게 한눈에 정보를 제공할 수 있는 일부 데이터를 그래픽으로 표현한 것입니다. WordPress 게시물의 진행률 표시줄을 사용하여 데이터나 통계를 표시하면 웹사이트의 매력과 사용자 참여를 향상시키는 데 도움이 될 수 있습니다.
코드를 사용하여 WordPress 웹 사이트에 진행률 표시줄을 추가하는 방법은 무엇입니까?
플러그인 없이 WordPress에 진행률 표시줄을 추가하려면 사용자는 게시물에서 사용자 정의 HTML 및 CSS를 사용해야 합니다. 그렇게 하려면 아래에 제공된 단계를 따르십시오.
1단계: 대시보드에 로그인
브라우저를 열고 ' http://localhost/<Website-Name>/wp-login.php '링크. 관리자 자격 증명을 제공하고 ' 로그인 ' 버튼:
2단계: 새 게시물 작성
이동 ' 게시물 > 새로 추가 ” 관리 대시보드의 사이드 메뉴에서:
3단계: 사용자 정의 HTML 코드 추가
게시물에 제목과 추가 콘텐츠를 제공하세요. 그런 다음 '를 클릭하십시오. + ” 아이콘을 클릭하고 “ 맞춤 HTML ' 차단하다:
추가된 HTML 블록에 아래 제공된 코드를 붙여넣습니다. '를 변경하십시오. 너비 ' 안에 ' <스팬> ” 진행률 표시줄의 원하는 비율에 대한 태그입니다. 마찬가지로 ' 진행 텍스트 ' 따라서 :
< div 수업 = '사용자 정의 진행률 표시줄' >< 기간 스타일 = '너비: 80%' >< / 기간 >
< div 수업 = '진행 텍스트' > 80% < / div >
< / div >
그 후 “ 게시 ” 버튼을 눌러 웹사이트에 게시물을 업로드하세요.
4단계: 맞춤 CSS 추가
게시물이 게시되면 '를 클릭하세요. 게시물 보기 ' 버튼:
미리보기에서 '를 클릭하세요. 사용자 정의 ” 버튼을 사용하여 진행률 표시줄에 스타일을 추가합니다.
화면 왼쪽에 편집기 메뉴가 나타납니다. 여기에서 아래로 스크롤하여 '를 클릭하십시오. 추가 CSS ' 부분:
진행률 표시줄의 스타일을 지정하려면 상자에 다음 CSS 코드를 붙여넣으세요.
.custom-진행률 표시줄 {배경- 색상 : #1a1a1a;
키 : 30px;
패딩: 5px;
너비 : 500px;
여백: 5px 0 ;
테두리 반경: 5px;
상자 그림자: 0 1px 5px #000 삽입, 0 1px 0 # 444 ;
}
.custom-진행률 표시줄 기간 {
배경- 색상 : #0000FF;
디스플레이: 인라인 블록;
왼쪽으로 뜨다;
키 : 100 %;
테두리 반경: 3px;
상자 그림자: 0 1px 0 RGBA ( 255 , 255 , 255 , .5 ) 삽입;
이행: 너비 .4초 이지인아웃;
}
.진행- 텍스트 {
텍스트- 맞추다 : 오른쪽;
색상 : 하얀색;
여백: 0px;
}
5단계: 게시물 게시
마지막으로 '를 클릭하세요. 게시 ” 게시물을 게시하여 변경 사항을 저장하세요.
페이지를 다시 로드하면 사용자는 게시물에 진행률 표시줄이 표시되는 것을 볼 수 있습니다.
플러그인을 사용하여 WordPress 웹사이트에 진행률 표시줄을 추가하는 방법은 무엇입니까?
이 데모에서는 “Ultimate Blocks” 플러그인을 사용하여 WordPress 웹사이트에 진행률 표시줄을 추가합니다. 동일한 작업을 수행하려면 아래 제공된 단계를 따르십시오.
1단계: 새 플러그인 추가
사용자가 대시보드에 로그인하면 ' 플러그인 > 새로 추가 측면 메뉴 표시줄의 ' 옵션:
2단계: Ultimate Blocks 플러그인 설치
Ultimate Blocks를 검색하고 '를 누르세요. 입력하다 ' 열쇠. 그런 다음 아래 표시된 '를 클릭하십시오. 지금 설치 ' 버튼:
3단계: Ultimate Block 활성화
플러그인이 설치되면 ' 활성화 ” 버튼을 눌러 WordPress의 진행률 표시줄을 사용하세요.
4단계: 새 게시물 작성
WordPress 게시물에 진행률 표시줄을 추가하려면 ' 게시물 > 새로 추가 사이드 메뉴의 '옵션:
5단계: 진행률 표시줄 블록 추가
게시물의 제목과 내용을 입력하세요. 다음으로 “ + ” 아이콘을 클릭해 새 블록을 추가하세요. 메뉴에서 '를 검색하세요. 진행 표시 줄 '를 선택하고 블록을 선택합니다.
6단계: 막대의 백분율 설정
진행률 표시줄의 백분율을 설정하려면 파란색 슬라이더를 사용하거나 아래 강조 표시 상자에 백분율을 입력합니다.
7단계: 게시물 게시
게시물 작성이 완료되면 '를 클릭하세요. 게시 ” 버튼을 눌러 웹사이트에 게시물을 업로드하세요.
8단계: 게시물 보기
게시물을 게시한 후 '게시물 보기' 버튼을 클릭하면 웹사이트에서 게시물의 미리보기를 볼 수 있습니다.
아래 출력에서 진행률 표시줄이 게시물에 추가된 것을 볼 수 있습니다.
WordPress에 진행률 표시줄을 추가하는 것이 전부입니다.
결론
WordPress 웹사이트에 진행률 표시줄을 추가하려면 ' 플러그인 > 새로 추가 사이드 메뉴의 '옵션'을 선택하세요. '를 검색하여 설치하세요. 얼티밋 블록 ' 플러그인. 설치 후 활성화해 보세요. 그런 다음 “ 게시물 > 새로 추가 ”를 입력하고 게시물의 제목과 내용을 제공합니다. 다음으로 “를 클릭하세요. + ” 아이콘을 클릭하고 “ 진행 표시 줄 ' 차단하다. 슬라이더를 사용하거나 숫자를 입력하여 진행률을 설정합니다. 이 문서에서는 플러그인이 있거나 없는 상태에서 WordPress에 진행률 표시줄을 추가하는 절차를 설명했습니다.