워드프레스 이미지에 alt text 넣기

현재 페이지를 로딩중입니다.
만약 페이지 로딩이 끝났는데 본문이 보이지 않는다면
광고차단 플러그인 때문이니 잠시 플러그인을 꺼주시면 감사하겠습니다.

The current page is loading.
If the page loading is over but the text is not visible
This is because of the ad blocking plugin, so please be sure to turn off the plugin for a while.

 

네이버메일 소유확인 만료일이 30일 남았습니다.

네이버 웹마스터에서 메일이 옴.
이게 뭔소린가 보니 소유 확인용으로 받았던 html 파일을 내가 뭐하다 그런건진 기억 안나지만 삭제했었음.

그래서 갱신을 할려고 했더니 소유확인 갱신 페이지가 어디에 있는건지 찾다가 지쳐서 걍 삭제 하고 사이트를 재등록했음.

재등록 했더니 같은 도메인이라 그런지 대부분이 예전에 나오던 정보 그대로 나왔는데 눈에 띄는게 하나 있음

사이트 구조 링크관리 !

사이트 구조 링크 관리에 ! 느낌표가 있길래 우측 사이트 품질 가이드를 들어가 확인해보니

네이버 웹마스터 이미지 alt 속성에 대한 설명

내 블로그의 대부분의 이미지에 alt 항목이 공란이기 때문임. 그래서 미디어 페이지에서 열심히 갱신해줬지만 이게 미디어항목에만 갱신되고 본문글엔 하나도 반영이 안됨.

그래서 해당글을 열어서 이미지 택해서 써주면 되는건가 하고 했는데.. 워드프레스 웃기는게 본문속에서 이미지 선택해서 alt 입력하면 이건 본문에만 해당되고 라이브러리에는 반영이 되지 않음.

이미지 첨부할때 드래그 드롭으로 미디어 추가 하고 그 창에서 바로 alt 를 입력해야 미디어라이브러리도 반영되고 본문글에도 반영됨.
하지만 이렇게 해도 나중에 미디어 라이브러리에서 수정하면 본문엔 반영이 안됨.

워드프레스의 근본적인 구조 때문인데 본문 텍스트가 글 작성하는 시점에 모든게 다 들어가고 끝이라는점.
첨부파일에 메타정보는 있지만 이건 gui 항목을 통해 미디어를 재붙임 하지 않으면 메타정보가 제대로 본문에 삽입이 안됨.

그래서 같은 이미지를 쓰는 글에 똑같은 alt 텍스트가 붙는게 아니라 모든글을 일일이 수정해줘야 한다는 삽질이 예고됨.

플러그인을 몇개 찾아봤는데 맘에 드는게 하나도 없음.
글 제목이나 파일명을 자동으로 가져다가 넣어주는게 있는데 그러면 별의미가 없을거 같아서 말았고

단순 검색노출을 위해 태그명을 가져다가 넣어주는걸 만들었는데 생각해보니 원래 이 기능의 의도와는 맞지 않는거 같아서 이래저래 고민하다가 미디어 라이브러리에서 alt 텍스트 수정하면 본문도 바로 반영되도록 하는게 좋을거 같아서 삽질 들어감.

내 블로그 서버는 성능이 낮기 때문에 처음엔 wp_footer에 미리 alt 변수로 받아놓고 자바스크립트로 클라이언트에서 로드 후 변경하는 식으로 작업을 하다가

검색엔진 봇들은 자바스크립트 지원 안하는것들은 노출이 안되기 때문에 의미가 없게되서 php딴에서 다 해결하도록 삽질.

function replace_altTag($contents){
	if(is_single()){
		//본문에 첨부되어있던 alt 태그 내용 구함
		preg_match_all("/<img[^>]*alt=[\"']?([^>\"']+)[\"']?[^>]*>/i", $contents, $removeAltTagMatches);
		$total =  count ($removeAltTagMatches[0]);
		//본문 작성시 들어간 태그를 전부 공란으로 바꾼다.
		for($cnt =0;  $cnt<$total; $cnt++){
			$contents = str_replace('alt="'.$removeAltTagMatches[1][$cnt].'"', 'alt=""',$contents);
		}
		
		//본문에 포함된 태그중에 이미지 첨부id를 추출한다.
		preg_match_all("/<img[^>]*wp-image-([^>\"']+)[\"']?[^>]*>/i", $contents, $matches);
		$total =  count ($matches[0]);
		
		for($cnt =0;  $cnt<$total; $cnt++){
			$tagStr = $matches[0][$cnt];
			$idNum = preg_replace("/[^0-9]*/s", "", $matches[1][$cnt]); 
			
			//첨부파일id로 alt 태그를 가져온다
			$altText = (get_post_meta($idNum, '_wp_attachment_image_alt'))[0];
			
			$tagStr = str_replace('alt=""', 'alt="'.$altText.'"' ,$tagStr);
			$contents = str_replace($matches[0][$cnt], $tagStr, $contents);
		}
	}
	return $contents;
}
add_filter('the_content','replace_altTag');

일단 소스코드

차일드 테마에 function.php 파일에 넣어주면 됨.

원리는 본문 텍스트에 img 태그에 있는 alt 항목을 전부 날려버리고 alt 텍스트 가져와서 짜잔! 하고 해주는 뭐 그런거.
정규식만 미리 배워뒀으면 정말 금방 할거를 엄청난 삽질을 통해 작성함. -_-;

그나저나 php는 디버깅 찍는것도 없고 빡세네.

크리에이티브 커먼즈 라이선스 Linsoo의 저작물인 이 저작물은(는)크리에이티브 커먼즈 저작자표시-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.

댓글 남기기

이메일은 공개되지 않습니다.

This site uses Akismet to reduce spam. Learn how your comment data is processed.