이미지 파일 크기별 URL 주소
워드프레스(WordPress)에 이미지를 올리면, 한 가지 사이즈로 저장이 되는 것이 아니라 여러 크기 별로 저장이 된다. 하지만 워드프레스에서는 기본적으로 한 가지 사이즈만 확인(Section 1)할 수 있다. Section 2에서는 다른 크기의 이미지 URL 주소를 표시하는 방법을 알아본다. PHP를 잘 아시는 분들은 더 쉽게 이해할 수 있겠지만, 그렇지 않더라도 아래 방법을 단계별로 따라하면 쉽게 구현할 수 있을 것이다.
1. 이미지 URL 확인하는 방법
먼저 이미지의 기본 URL를 찾아보는 방법에 대해서 알아보자.
[1] 워드프레스의 대쉬보드로 들어간 뒤, 왼쪽 메뉴에 Media > Library를 클릭한다.
[2] Media Library 보기 방식으로는 리스트(List)와 그리드(Grid) 방식이 있다. 두 가지 방식으로 모두 이미지 주소를 찾을 수 있는데, 여기서는 리스트 방식으로 진행해 보겠다. 리스트 버튼을 클릭한다.
[3] 리스트의 제목란에 보면 File, Author, Uploaded to, Date를 볼 수 있다. 나중에 여기에 새로운 컬럼으로 이미지 URL 주소를 넣을 것이다. 지금은 이미지 주소에 대한 컬럼이 없다는 점만 집고 넘어가자.
[4] 원하는 이미지를 클릭한다.
[5] 창이 열리면, Save 탭에 File URL이 있다. “Copy URL to clipboard”를 클릭하면 주소가 자동으로 복사된다. 여기서 복사된 주소는 https://oursmalljoy.com/wp-content/uploads/2021/12/1640376536128.jpg 이고, 사이즈는 1024 x 1024이다. 아마도 워드프레스 테마마다 다를 수 있을 건데, 여기서 사용한 테마는 Astra이고, Astra인 경우에는 Large 사이즈 이미지 말고도 다양한 사이즈들의 이미지들이 동시에 저장된다. 예를 들면 Large (1024×1024), Medium_large (768×768), Medium (300×300), Thumbnail (90×90), 1536×1536, 2048×2048 등으로 저장된다.
2. 이미지 사이즈별 URL 추가하기
워드프레스를 PHP 조작을 통해, 대쉬보드>Media>Library에 새로운 컬럼을 추가하여 이미지 사이즈별 URL을 표시할 것이다.
[1] 대쉬보드 > Appearance > Theme Editor를 클릭한다.
[2] 오른쪽에서 functions.php를 클릭한다. 여기에 새로운 PHP 코드를 넣어서 Media 탭을 해킹(?)할 것이다. 어렵지는 않고 아래 코드를 그냥 복사/붙여넣기를 하면된다.
[3] 아래 코드를 functions.php 파일 코드창에 붙여 넣는다. 붙여넣기 하는 위치는 상관없다.
[4] 아래 Update File을 클릭한다.
// add url column function add_new_media_column($cols) { $cols[‘url’] = ‘URL’; return $cols; } // output the url column function output_url_column($column_name, $id) { if ($column_name == ‘url’) { $dir = wp_upload_dir()[‘url’]; $meta = wp_get_attachment_metadata($id); foreach ($meta[‘sizes’] as $name => $info) { echo ‘<strong>’.$name.‘: </strong><small>’.$dir.‘/’.$info[‘file’].‘ </small><br>’; } } } // hook new media columns function hook_new_media_columns() { add_filter(‘manage_media_columns’, ‘add_new_media_column’); add_action(‘manage_media_custom_column’, ‘output_url_column’, 10, 2); } add_action(‘admin_init’, ‘hook_new_media_columns’); |
[5] Media > Library에 URL 컬럼이 새로 생겼고, 여기에 이미지 크기별로 URL 주소가 표시된다.
