웹사이트 상단 페이지 링크 버튼 미화: get_pages() 메소드를 사용하세요.

이전 튜토리얼을 따랐다면 이제 사이트 헤더에 최상위 페이지에 대한 링크가 포함된 테마(또는 하위 테마)가 사이트에 생성됩니다.

저는 26명의 어린이 테마를 만들었고 현재 링크는 다음과 같습니다:

이 튜토리얼에서는 테마에 CSS를 추가하여 링크를 좀 더 좋게 만드는 방법을 보여 드리겠습니다. 글머리 기호를 제거하고 플로트를 추가하는 것부터 시작해 보겠습니다.

글머리 기호를 제거하고 플로트를 추가하세요

테마의 스타일 시트를 엽니다. 하위 테마를 만든 경우에는 비어 있지만 자신만의 테마를 사용하는 경우 헤더 스타일이 포함된 스타일시트 섹션에 이 스타일을 추가하는 것이 좋습니다.

출력 페이지 링크에 대한 코드 검토(링크할 페이지가 있는 경우):

으아악

이것은 top-level-page-links 类的 ul 元素，并在其中 li 元素，其中 page-link 类后跟 a(예: 링크)를 사용하여 요소를 타겟팅한다는 의미입니다.

먼저 총알을 제거해 봅시다. 이것을 추가하세요:

으아악

다음으로 각 목록 항목의 패딩을 제거하고 margin-left 문을 추가해 보겠습니다.

으아악

이제 화면을 새로 고치면 목록 스타일이 사라진 것을 볼 수 있습니다:

다음으로 이러한 링크가 서로 옆에 떠 있도록 하세요. 스타일시트에 다음을 추가하세요:

으아악

이제 링크가 나란히 표시됩니다.

다음으로 링크를 버튼처럼 보이게 만들어 보겠습니다.

여백, 패딩 및 배경 추가

링크를 버튼처럼 보이게 만들기 위해 링크에 여백, 패딩 및 배경을 추가하겠습니다.

스타일시트에 다음을 추가하세요:

으아악

왼쪽 버튼을 페이지 왼쪽에 정렬하기 위해 오른쪽 여백만 사용했다는 점에 유의하세요.

화면을 새로 고치면 버튼이 버튼처럼 보입니다.

훨씬 좋아 보이지만 약간의 기술이 필요합니다. 누군가 버튼 위로 마우스를 가져가면 색상이 변경되도록 텍스트와 배경의 색상을 편집해 보겠습니다.

호버 효과 추가

이제 이 버튼을 더욱 매력적으로 만들어 보겠습니다.

스타일시트에 두 개의 선언 블록을 더 추가하고 방금 추가한 링크에 대한 선언 블록 뒤에 추가해야 합니다.

으아악

이렇게 하면 링크 색상이 변경되고, 밑줄이 제거되며, 누군가 링크 위에 마우스를 올리거나 링크가 활성화되면 색상이 변경됩니다.

페이지에 어떻게 표시되는지 살펴보겠습니다.

링크 위로 마우스를 가져가면:

훨씬 좋아졌어요!

요약

두 부분으로 구성된 이 튜토리얼에서는 자동으로 생성된 웹 사이트의 최상위 페이지에 대한 링크를 만든 다음 CSS를 사용하여 해당 링크의 스타일을 지정하여 버튼처럼 보이게 하는 방법을 배웠습니다.

이것은 방문자를 해당 페이지로 직접 유도할 수 있는 훌륭하고 눈에 띄는 방법을 제공하며, 이는 많은 방문자가 상위 페이지에 액세스할 수 있도록 하려는 경우에 유용합니다.

위 내용은 웹사이트 상단 페이지 링크 버튼 미화: get_pages() 메소드를 사용하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!