WordPress Carousel 플러그인 구축 : Part 2

회전 목마는 단순히 링크 목록이 아니라 링크를 더 매력적으로 만드는 방식으로 항목으로 표시하는 것이 존재합니다. 이전 기사에서는 회전 목마를 만드는 방법과 필요한 HTML 요소를 표시하는 방법을 보았습니다. 이제 WordPress Carousel 플러그인을 구축하고 스타일링 할 차례입니다.

우리의 회전 목마는 현재 간단한 링크 목록입니다.이 기사의 끝까지 우리는 올바르게 형식화 된 회전 목마를 갖습니다. 우리는 1 부에서 샘플 이미지에서 보여준 결과를 얻는 데 필요한 스타일을 적용하는 방법을 살펴 보겠습니다. 물론 웹 사이트가 전 세계에서 동일 할 필요는없는 많은 속성이 있습니다!

먼저 CSS 파일을 WordPress 내 웹 페이지에 올바르게 연결하는 방법을 살펴 보겠습니다. 그러면 우리는 요소를 스타일링 할 것입니다. 이는 다양한 상황에서 유용 할 수있는 몇 가지 CSS 트릭을 보여줄 것입니다.

키 테이크 아웃

WordPress Carousel 플러그인은 외부 CSS 파일을 연결하여 향상되므로보다 쉽고 유연한 스타일이 가능합니다. 여기에는 파일을 포함시키기위한 wp_enqueue_style () 함수가 포함됩니다. 회전 목마의 크기는 CSS 파일에 정의되며 각 항목은 전체 블록을 작성합니다. 링크의 위치와 컨테이너의 크기도 설정됩니다.

항목 이름, 설명 및 화살표의 스타일은 디스플레이, 패딩, 색상, 배경색, 텍스트 정렬 및 텍스트 쇼와 같은 CSS 속성을 사용하여 사용자 정의됩니다. 회전 목마 플러그인은 화살표를 작동시키기 위해 JavaScript를 추가하여 완성되어 화살표를 클릭 할 때 스크롤 할 수 있습니다. 이것은 튜토리얼의 다음 부분에서 다룰 것입니다.

외부 CSS 파일을 연결합니다 회전 목마 스타일을 가능한 한 유연하고 쉽게 만들기 위해, 우리는 인라인 스타일의 사용을 각 항목의 배경 인 하나의 속성으로만 제한했습니다. 다른 모든 스타일의 경우 외부 CSS 파일 (스타일 시트)을 사용합니다. 파일의 이름 (예 : Carousel.css)을 선택하여 플러그인 폴더 (또는 하위 디렉토리)에 배치 할 수 있습니다. 파일을 포함시키기 위해 스크립트를 포함하는 올바른 방법에 대해 기사에 설명 된대로 wp_enqueue_style () 함수를 사용합니다. 우리는이 기능을 어디에서나 호출 할 수 없으며, wp_head ()의 호출 전에 호출되어야합니다 (스크립트와 달리 바닥 글에 CSS 파일을 포함시킬 수 없습니다!). WordPress는 스크립트와 현재 페이지의 스타일 (프론트 엔드)을 포함 할 때 호출되는 wp_enqueue_scripts를 사용할 수 있으므로이 응용 프로그램에 적합합니다.

. 아래 코드는 플러그인의 기본 파일에 나타나야합니다.

<span><span>function enqueue_carousel_style() {</span>
</span>    wp_enqueue_style(<span>'carousel', plugin_dir_url(__FILE__) . 'carousel.css');
</span>}
add_action(<span>'wp_enqueue_scripts', 'enqueue_carousel_style');</span>

<_> wp_enqueue_style () 함수는 두 개의 매개 변수, 스타일의 이름과 URI를 해당 파일에 수락합니다. carousel.css 파일 이이 폴더의 루트에 위치하고 있기 때문에 플러그인_dir_url () 함수는 플러그인 폴더에 URL을 제공합니다. 우리는 우리의 기능에서 아무것도 테스트하지 않는다는 점에 유의하십시오. WordPress는 모든 페이지에 CSS 파일을 포함합니다. 모든 페이지에 회전 목마를 표시하는 경우 문제가되지 않습니다. 그러나 일부 페이지 (예 : 홈페이지에만)에만 회전 목마를 표시하는 경우 CSS 파일을 포함하기 전에 방문자가 오른쪽 페이지에 있는지 여부를 테스트해야합니다 (예 : IS_HOME ()). 이제 CSS 파일을 편집 할 차례입니다 회전 목마를 스타일로 만들어 봅시다! 회전 목마의 크기

우리는 #carousel로 식별 된 기본 컨테이너의 크기로 시작합니다. 여기에서 원하는 크기를 설정할 수 있습니다. 우리가 크기를 조정하지 않는 이미지를 사용하면 고정 크기가 좋은 아이디어입니다.

나중에, 우리는이 컨테이너에 오버플로에 세 번째 속성을 추가합니다. 우리가 그것을 사용하지 않을 순간, 그렇게하면, 우리는 페이지를 가로 질러 우리의 항목이 어떻게 배치되는지 알 수 있습니다.

. 각 항목은 방금 만든 전체 블록을 채 웁니다. 다음 규칙은 부모뿐만 아니라 항목 자체 (클래스 이름 캐리 셀 링크가있는 태그)에 적용됩니다.

링크를 링크

우리가 오른쪽으로 갈 때 어떻게됩니까? 이제 우리는 우리가하고 싶은 일에 대해 생각해야합니다. 회전 목마를 만들고 싶을 때는 많은 가능성이 있습니다. 플로트 속성을 갖춘 대형 컨테이너로 서로 옆에 항목을 배치하는 것이 좋습니다. 한 줄에 모든 품목을 모두 포함시킬 정도로 충분히 커야합니다.

. 사용자가 다른 이미지를보고 싶을 때이 컨테이너를 #carousel div와 다음 항목을 정렬하도록 이동합니다. 이 div는 속성 오버 플로우가 숨겨 지도록 설정할 것입니다. 그렇게하면 다른 링크가 표시되지 않습니다. 아래는 우리가 만들고 싶은 스키마입니다. 녹색으로 모든 링크가있는 큰 컨테이너를 한 줄로 볼 수 있습니다. 오른쪽의 링크를보기 위해 컨테이너는 왼쪽으로 이동하고 그 반대도 마찬가지입니다. 검은 색 프레임은 #carousel div :이 프레임 밖에서 모든 것이 보이지 않습니다.

컨테이너의 크기 먼저, 컨테이너 : UL은 우리의 목적에 적합하기 때문에 다른 HTML 요소를 생성하지 않습니다. 우리는이 컨테이너가 모든 링크를 한 줄로 포함 할 수있을 정도로 커야한다는 것을 알았습니다. 현재는 그렇지 않습니다. 우리 품목과 컨테이너는 모두 900 픽셀입니다. 이를 변경하기 위해 컨테이너의 너비를 500%로 증가시킵니다. #Carousel로 식별 된 DIV의 너비는 900 픽셀이므로 너비는 500%로 5 개의 링크를 연속으로 표시 할 수 있습니다.

.

<span><span>function enqueue_carousel_style() {</span>
</span>    wp_enqueue_style(<span>'carousel', plugin_dir_url(__FILE__) . 'carousel.css');
</span>}
add_action(<span>'wp_enqueue_scripts', 'enqueue_carousel_style');</span>

여기에서 잠재적 인 문제가 발생할 수 있습니다. 여기에서 항목의 수는 가변적 일 수 있습니다. 실제로 스크립트는 예를 들어 세 항목 만 표시 할 수 있습니다. 항목 수를 최대 5로 제한했기 때문에 실제로는 문제가되지 않기 때문에 3 개만 있더라도 모두 적합하고 빈 공간은 회전 목마 작동을 방해하지 않습니다.

. 다른 한계를 선택한 경우이 너비를 변경해야합니다 (예 : 10을 표시하려는 경우 1000%). 한계를 원하지 않을 때 문제가 나타납니다. 이 경우 표시 할 항목 수를 포함하는 $ N 변수를 기반으로 UL 태그의 스타일 속성에서 너비를 설정해야합니다.

링크를 링크

이제 Li 태그의 너비를 수정해야합니다. 현재 그들은 100%로 설정되므로 컨테이너의 전체 너비를 5 배 너무 길게 옮길 것입니다.

.

<span>#carousel {
</span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span>    <span><span>height: <span>350px</span></span>;
</span></span><span><span>}</span></span>

li 태그는 이제 오른쪽 너비를 가지며 떠 다니고 있습니다. 우리의 회전 목마를 테스트하면 올바른 결과가 표시됩니다. 서로 옆에 5 개의 항목이 있습니다. 이제 오버 플로우 속성을 #carousel에 추가하여 보이지 않아야 할 항목을 숨길 수 있습니다.

항목의 이름과 설명 항목의 이름은 원하는대로 스타일을 만들 수 있습니다. 여기서는이 튜토리얼의 이전 부분에서 본 스타일을 어떻게 만들 었는지 설명하겠습니다.

알림으로, 항목의 이름은 a.carousel-link 요소의 강한 태그로 표시됩니다. 스트립은 배경색으로 얻을 수 있지만이 스트립이 전체 너비를 차지하기를 원합니다. 그렇게하기 위해 우리는 디스플레이를 차단하도록 설정할 수 있습니다. 패딩 및 색상 특성은 스타일을 완성합니다

이름과 마찬가지로 항목의 설명을 개인화 할 수 있습니다. 여기 나는 아래의 CSS를 사용하여 오른쪽에 이름 아래에 표시를 선택했습니다.

디스플레이 속성의 블록 값을 사용하면 EM 태그가 사용 가능한 모든 너비를 사용할 수 있습니다. 그런 다음 텍스트가 패딩과 함께 오른쪽에있는 텍스트를 정렬하여 텍스트가 가장자리에 어렵지 않습니다. 나는 여기서 텍스트 색상을 위해 어두운 회색을 선택했습니다. 어두운 이미지에서도 텍스트가 항상 읽을 수 있는지 확인하기 위해 흰색 텍스트 그림자를 추가했습니다. 화살표 스타일 마지막 단계는 화살표를 올바르게 표시하는 것입니다. 이 화살표를 표시 할 위치에 따라 여기에는 몇 가지 선택이 있습니다.

<span>#carousel ul,
</span><span>#carousel ul li,
</span><span>#carousel ul li a.carousel-link {
</span><span>    <span><span>display: block</span>;
</span></span><span>    <span><span>width: <span>100%</span></span>;
</span></span><span>    <span><span>height: <span>100%</span></span>;
</span></span><span><span>}</span></span>

아래에 나열된 속성을 사용하여 샘플 항목에 미치는 영향을 얻었습니다. 우리는 화살표를 블록으로 변환하여 크기를 수정 하고이 크기를 수정 한 다음 화살표를 스타일링 할 수 있습니다. 우리는 또한 텍스트 (화살표)를 수직으로 정렬하기 위해 유용한 트릭을 사용하고, 선-높이 속성을 높이에 준 것과 동일한 값으로 설정하면 텍스트는 수직 중앙에 있습니다.

.

<span><span>function enqueue_carousel_style() {</span>
</span>    wp_enqueue_style(<span>'carousel', plugin_dir_url(__FILE__) . 'carousel.css');
</span>}
add_action(<span>'wp_enqueue_scripts', 'enqueue_carousel_style');</span>

둥근 모서리를 재현하기 위해, 우리는 Border-Radius를 사용하지만 모든 모서리에 있지는 않지만 회전 목마의 측면에있는 것은 반올림해서는 안됩니다. 그렇기 때문에 우리는 Border-Radius의 '하위 단점'을 사용하여 모서리를 둥글게 선택할 수 있습니다.

마지막으로, 나는 개인적으로 버튼과 링크를 좋아하여 호버 효과를 얻습니다. 여기서 나는 화살표의 색을 수정하기로 결정했다.

<span>#carousel {
</span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span>    <span><span>height: <span>350px</span></span>;
</span></span><span><span>}</span></span>

CSS3는 우리가 쉽게 부드러운 전환을 가질 수 있으므로 왜 그것들을 사용하지 않겠습니까?

화살표 위치 그게 화살의 스타일을위한 것입니다. 이제 우리는 그들을 원하는 곳에 배치해야합니다. 우리는 약간의 속임수로 절대 포지셔닝을 사용할 것입니다. 회전식 자체의 위치를 ​​알지 못하므로 화면 코너에서 화살표를 배치 할 수 없습니다. 대신, 우리는 회전 목마 코너와 더 정확하게 Li 태그 코너를 사용할 것입니다. 위치를 절대로 설정하고 화살표를 배치하자

이것을 시도하면 화살표가 화면 측면에 배치됩니다. 덜 알려진 절대 포지셔닝 옵션을 사용해야합니다. 화살표 요소는 가장 가까운 위치 부모에 비해 배치됩니다. 여기서, 우리의 화살에는 부모가 없으므로 화면에 비해 배치됩니다. 문제는 부모가 올바른 장소에있는 화살표입니다. 우리는 그 중 어느 것도 움직이기를 원하지 않습니다. 트릭은 다른 것을 변경하지 않고 상대 위치를 사용하는 것으로 구성됩니다. 우리는 우리의 화살의 가장 가까운 부모 인 Li 태그에 상대적 위치를 적용 할 것입니다.

<span>#carousel ul,
</span><span>#carousel ul li,
</span><span>#carousel ul li a.carousel-link {
</span><span>    <span><span>display: block</span>;
</span></span><span>    <span><span>width: <span>100%</span></span>;
</span></span><span>    <span><span>height: <span>100%</span></span>;
</span></span><span><span>}</span></span>

그러면 화살표는 가장 가까운 부모 인 Li 태그의 측면에 위치합니다. > 다음은 무엇입니까?

회전 목마에 필요한 HTML 요소가 표시되고 이제는 스타일이 있습니다. 문제는 첫 번째 항목을 보여주기 때문에 우리의 회전 목마가 완전히 쓸모가 없다는 것입니다 (CSS없이 더 유용했습니다!). 그래서 마지막으로 JavaScript를 추가해야합니다. 다음 (그리고 마지막)이 튜토리얼의 일부에서 우리는 화살표가 예상대로 작동하게합니다. 화살표를 클릭하면 링크가 스크롤됩니다. 좋은 일이야?

위 내용은 WordPress Carousel 플러그인 구축 : Part 2의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!