워드프레스 #30
이번 영상에서는 워드프레스에서 a 태그에 링크 올바르게 연결하는 방법을 알려드릴게요. a 태그로 페이지 이동을 주로 하죠. 이때 워드프레스에서는 특정 방법이 필요합니다. 기존 html과 워드프레스 내 php로 작성법의 차이를 보여드릴게요.
HTML 내 A 태그
HTML에서는 단순히 href 속성에 URL을 지정하여 링크를 만듭니다.
<a href="이동할 url">링크</a>워드프레스 PHP 내 A 태그
워드프레스에서는 PHP 함수를 사용하여 동적으로 URL을 생성합니다. 이 방법은 워드프레스 사이트 구조나 URL이 변경되더라도 링크가 항상 올바르게 유지되도록 도와줍니다.
홈 페이지로 이동하는 링크
홈 페이지로 이동하는 링크를 만들 때는 esc_url( home_url( '/' ) ) 함수를 사용합니다.
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">홈</a>특정 페이지로 이동하는 링크
특정 페이지로 이동하는 링크를 만들 때는 get_permalink() 함수와 페이지의 슬러그를 사용합니다. 예를 들어, “about”이라는 슬러그를 가진 페이지로 이동하는 링크는 다음과 같이 작성할 수 있습니다. 또는, 그냥 home_url 기준으로 / 뒤에 slug를 넣어도 됩니다. 예를 들면, /about 이렇게하면 슬러그 about인 페이지로 이동합니다.
<?php
// 'about' 슬러그를 가진 페이지의 링크를 가져옵니다.
$page_id = get_page_by_path('about')->ID;
$page_url = get_permalink($page_id);
?>
<a href="<?php echo esc_url($page_url); ?>">About</a><a href="<?php echo esc_url( home_url( '/' ) ); ?>">홈</a>위 코드에서는 먼저 get_page_by_path() 함수를 사용하여 “about” 페이지의 ID를 가져오고, 그 ID를 사용하여 get_permalink() 함수로 해당 페이지의 URL을 가져옵니다.
esc_url() 함수
esc_url() 함수는 URL을 안전하게 출력하기 위해 사용됩니다. 이 함수는 URL을 필터링하여 XSS(교차 사이트 스크립팅) 공격으로부터 보호합니다.
전체 예시
<!DOCTYPE html>
<html>
<head>
<title>워드프레스 링크 예시</title>
</head>
<body>
<!-- 홈으로 이동하는 링크 -->
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">홈</a>
<!-- 'about' 슬러그를 가진 페이지로 이동하는 링크 -->
<?php
$page_id = get_page_by_path('about')->ID;
$page_url = get_permalink($page_id);
?>
<a href="<?php echo esc_url($page_url); ?>">About</a>
</body>
</html>위 예시에서는 워드프레스의 PHP 함수를 사용하여 홈 페이지와 “about” 페이지로 이동하는 링크를 생성했습니다. 이 방법을 사용하면 URL이 변경되더라도 링크가 항상 올바르게 유지되므로 유지보수가 용이해집니다.
