워드프레스 표 테이블에 사진 넣는 방법

워드프레스를 편집하고 작성 중 테이블 안에 사진을 넣어야 할 때가 있다. 일반적인 워드프레스 블록 편집기 화면에서는 사진을 넣을 수가 없다. 테이블에 사진이나 이미지를 넣을 방법을 찾아본다.


먼저 테이블을 만든다.


자료와 이미지는 이미 구매한 적이 있는 네이버 스마트스토어 호주마미 어그부츠 가게의 자료를 참조한다. 아래처럼 UGG 부츠의 이미지를 작게 추가할 테이블을 생성하였다.

이미지가 들어갈 위치는 AA, BB, CC …. 이다.

어그 부츠이미지가격(원)
어그부츠
울트라 미니 클래식
AA85,000
로즈웨어
어그슬리퍼
BB66,900
오즈웨어
클래식 울트라미니
CC68,900
다니엘라
프랫폼 부츠
DD78,600
오즈웨어
통굽 플랫폼 슬리퍼
EE73,100

사진의 URL 주소와 코드

먼저 삽입할 그림을 테이블 밖에 글 편집기에 붙여 보았다.

샘플 사진
샘플 사진

이 그림을 선택하고 메뉴에서 옵션/HTML로 편집 메뉴를 클릭하면 코드가 나온다. 아래와 같다. 코드내에서 사진에 대한 주소와 html 코드는 박스안의 코드에서 확인을 할 수 있다.

사진의 HTML 코드
사진의 HTML 코드

<img src=”https://molbania.com/wp-content/uploads/2023/12/table-image01.webp” alt = “” class= “wp-image-4608″/> 이 코드 이며, 사진의 파일이름과 위치 url을 확인 할 수 있다.

표시된 구간의 코드를 복사하여 테이블의 AA 위치(테이블의 html로 편집 상태)에 붙여 넣기하면 된다. 테이블에 커서를 놓고 화면 위쪽의 편집 메뉴에서 옵션을 누르고 HTML로 편집을 클릭하면

 HTML 편집 옵션
HTML 편집 옵션

아래와 같이 테이블 편집이 가능한 HTML 코드를 볼 수 있다. (일반 편집 화면으로 되돌아 가는 것은 비쥬얼로 편집 메뉴를 클릭하면 된다.)

테이블의 HTML 코드 보기
테이블의 HTML 코드 보기

복사한 코드 넣어주기

코드 내에서 표시된 부분에 집어넣을 사진에 대한 코드(사진의 URL)를 그대로 넣어준다.

HTML 편집 상태에서 AA 대신에 위에서 본 사진의 코드, <img src=”https://mxxlbania.com/wp-content/uploads/2023/12/table-image01.webp” alt = “” class= “wp-image-4608″/>를 붙여 넣는다.

BB 자리에는 미디어 라이브러리에 있는 추가할 사진 파일의 url 주소를 카피하고 주소만 바꾸어 붙여 넣기 하면 된다.

<img src=”https://mxxxlbania.com/wp-content/uploads/2023/12/두번째 이미지.webp” alt = “” class= “wp-image-4608″/>

어그 부츠이미지가격(원)
어그부츠
울트라 미니 클래식
85,000
로즈웨어
어그슬리퍼
66,900
오즈웨어
클래식 울트라미니
68,900
다니엘라
프랫폼 부츠
78,600
오즈웨어
통굽 플랫폼 슬리퍼
73,100

CC, DD, EE 자리에도 미디어 라이브러리의 사진의 URL을 복사해서 붙여 넣어주면 된다. (보통 같은 이름으로 번호만 다르게 파일이름을 정해두면 편집하기가 쉬워진다.

참고
혹시 라이브러리에서 아래 처럼 미첨부 표시가 뜨는 경우가 있다. 라이브러리를 정리해주는 플러그인을 사용시 지워질 수 있으니 해당 글에 첨부해 두는 것도 잊지말자.

미첨부 표기된 사진 첨부하기
미첨부 표기된 사진 첨부하기

좀 더 쉬운 방법은 CLASSIC 편집기를 사용하여 사진을 넣어주는 방법도 있다. 코드를 복사 붙여 넣기 할 필요도 없다. 사진의 URL만 붙여 넣으면 된다. (워드프레스 테이블에 사진 넣기– 클래식 편집기 사용)

🔽워드프레스 사이드바에 광고 달기, 넣어보기
🔽워드프레스 다음웹마스터 검색등록 하기


🔽워드프레스 운용을 위한 서버, 클라우드웨이즈 프로모션입니다.
아래 링크로 가입하면, 가입한 사람이 FUND를 받아 서버비용으로 충당할 수 있습니다. 추천한 사람도 FUND를 받습니다.

클라우드 웨이즈 프로모션!!
가입자도 추천자도 서버비용 $50 불 받아보자.
여기 프로모션 링크로 가기 

By Molbania