워드프레스 에디터 이미지 넣는 방법

워드프레스 에디터 이미지 넣는 방법

워드프레스 에디터 이미지 넣는 방법

  • 추천 순서
  • 최신 순서
  • 오래된 순서

  • 스레드봇 (28608 Point)ㆍ2019.11.08 18:28

    안녕하세요~^^

    KBoard 플러그인 에디터는 워드프레스 내장 에디터를 활용하고 있습니다.

    KBoard 5.4.3 버전에 적용된 드래그 앤 드롭으로 이미지 추가하기 기능은

    KBoard 미디어 추가 시 적용됩니다.

    이미지 캡처 및 드래그 앤 드롭은 어떤 방식으로 적용하신 건지

    좀 더 설명 부탁드립니다.

    고맙습니다.

  • 스레드봇 (28608 Point)ㆍ2019.11.11 01:12

    이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.

    고맙습니다.

  • 남생 (4 Point)ㆍ2019.11.11 11:04

    안녕하세요

    이미지 캡쳐는 캡쳐도구 프로그램과 Print Screen 기능을 이용하여 글쓰기 본문에서 붙여 넣기를 했습니다.

    드래그 앤 드롭은 이미지 파일을 글쓰기 본문에 했었구요.

      - Wordpress => KBoard => 게시판 목록 및 관리 => 생성한 게시판 클릭 => 고급설정 => 본문기본양식에 캡쳐한 이미지 붙여 넣기 및 이미지 파일 드래그앤 드롭하면 본문 내용에 이미지 삽입 가능

      - KBoard 에서 생성한 게시판으로 이동 => 글쓰기 => 캡쳐한 이미지 붙여 넣기 및 이미지 파일 드래그앤 드롭하면 본문 내용에 이미지 삽입 불가능

    이미지 삽입 테스트한 화면 업로드한 링크입니다.

      - https://imgur.com/gallery/fUdV8fe

    KBoard 미디어 추가에서도 이미지 파일 드래그 앤 드롭을 하면 글쓰기하던 페이지에서 벗어나게 됩니다.

    5.4.3 버전으로 업데이트하기 메뉴가 없어 Github에서 파일만 다운받아 서버에서 파일만 교체하였는데, 이렇게 해도 되는건지? 5.4.3으로 업데이트 하는 방법이 있으면 공유 부탁드립니다.

    감사합니다.

  • 스레드봇 (28608 Point)ㆍ2019.11.11 11:34

    안녕하세요.

    저희 쪽 테스트 서버에서는 KBoard 에디터 쪽뿐만 아니라

    워드프레스 관리자 페이지의 에디터 본문 쪽에서도

    캡처 이미지 복사 -> 붙여넣기 및 드래그 앤 드롭이 되지 않고 있습니다.

    캡처 이미지는 워드프레스 에디터와 호환이 되지 않는 문제로 보입니다.

    드래그 앤 드롭은 현재 워드프레스 미디어 추가 기능을 사용하시거나

    KBoard 5.4.3 버전에 적용되어 있는 KBoard 미디어 추가 기능에서 사용해주셔야 할 듯합니다.

    KBoard 플러그인 5.4.3 버전은 현재 공식 버전이 아니기 때문에

    실제 사이트에 적용하시려면

    말씀하신 것처럼 Github(깃허브)에서 다운로드하신 후에 적용해주시면 됩니다.

    이미지 복사 -> 붙여넣기 및 본문에 바로 드래그 앤 드롭하는 방법은

    저희도 좋은 방법이 있을지 연구해보겠습니다.

    고맙습니다.

  • 남생 (4 Point)ㆍ2019.11.11 12:08

    안녕하세요,

    KBoard 미디어에서 이미지파일 드래그 앤 드롭은 정상적으로 동작 하는것 확인 했습니다.

    이미지 복사 -> 붙여넣기 및 본문에 바로 드래그 앤 드롭 기능이 추가 되길 기다리겠습니다.

    감사합니다.

  • yk.song (49 Point)ㆍ2021.01.21 07:33

    혹시 이 기능 추가 됐을까요?

    저희 사이트 이용자가 번번히 게시판을 오류로 만들어서 물어 보니

    다른 웹이서 이미지를 복사, 저희 게시판에 붙여 넣기를 하셨다 하네요.

    에디트 창에는 잘 보이는데, 게시글을 확인이 안돼는 일이 빈번하게 발생해서 여쭤 봅니다.

  • 스레드봇 (28608 Point)ㆍ2021.01.21 14:27

워드프레스 에디터 이미지 넣는 방법

콘텐츠로 건너뛰기

왕초보의 워드프레스 – Elementor 간단 사용 방법

홈으로워드프레스왕초보의 워드프레스 – Elementor 간단 사용 방법

왕초보의 워드프레스 – Elementor 간단 사용 방법

워드프레스로 글쓰기 할때 기본 에디터를 사용하게 되는데 불편함을 느끼게 되어 Elementor라는 플러그인을 설치 후 사용하게 되었습니다. 결과적으로 기본 에디터 보다 훨씬 편리한것 같습니다. 전문적인 지식이 없이 간단히 사용할 수 있는 방법들을 리뷰하겠습니다.

먼저 기본 에디터 화면은 다음과 같습니다. 제목을 입력하고 ‘+’ 버튼으로 입력할 항목을 선택하고 텍스트나 이미지 등을 삽입 할 수 있습니다. 오늘의 주제인 Elementor를 설치하기 위해 플러그인 설치 화면으로 이동합니다.

워드프레스 에디터 이미지 넣는 방법

워드프레스 에디터 이미지 넣는 방법

Elementor 설치

플러그인의 새로추가 버튼을 클릭하고 오른쪽 상단의 플러그인 검색란에 ‘elementor’를 입력하고 Elementor page builder 가 나오면 ‘지금설치’를 클릭하여 설치 후 활성화를 시켜주세요. 설치 완료되었다는 화면은 무시하셔도 되고 왼쪽에 Elementor 가 설치된것을 확인 할 수 있습니다. 그러면 Setting으로 먼저 클릭합니다.

워드프레스 에디터 이미지 넣는 방법

워드프레스 에디터 이미지 넣는 방법

기본 설정

Setting은 먼저 하지 않아도 되지만 개인적으로 글씨 색상을 테마와 동일하게 하는게 좋을 거라 생각합니다.

General에서 Disable Default Colors를 체크 하면 테마 색상을 기준으로 적용 될 것입니다.

워드프레스 에디터 이미지 넣는 방법

새글 추가 방법

그럼 새 글을 추가해보겠습니다. 왼쪽 ‘글’ 에서 새글 추가를 선택합니다. 글 쓰는 화면이 나오고 제목을 입력한 후 상단에 Edit with Elementor를 클릭합니다.

워드프레스 에디터 이미지 넣는 방법

워드프레스 에디터 이미지 넣는 방법

포스팅 작성 방법

기본 에디터에서 Elementor 편집화면으로 변경되며 다음과 같이 나오게 됩니다. 입력 방법은 굉장히 간단합니다.

먼저 Heading을 입력하기 위해 T 모양의 Heading을 마우스로 선택 후 드레그하여 옮긴 후 입력란에 원하는 텍스트를 입력하면 됩니다. 크기나 색상의 변경은 바로 하셔도 되고 나중에 하셔도 됩니다.

워드프레스 에디터 이미지 넣는 방법

워드프레스 에디터 이미지 넣는 방법

동일한 방법으로 Text Editor를 선택하고 입력해 보겠습니다.

워드프레스 에디터 이미지 넣는 방법

워드프레스 에디터 이미지 넣는 방법

다음은 이미지 넣는 방법 입니다. 1장씩 넣어도 되면 여기에서는 2장의 이미지를 넣어 보겠습니다. 가운데 화면에서 ‘+’ 버튼을 클릭하고 2개짜리 화면을 선택합니다. 원하는 이미지 수에 따라 선택하면 되며, 1장이라면 텍스트와 마찬가지로 바로 끌어 오면 됩니다.

워드프레스 에디터 이미지 넣는 방법

워드프레스 에디터 이미지 넣는 방법

워드프레스 에디터 이미지 넣는 방법

이미지 등록 방법

파일 업로드 선택 후 등록할 이미지를 선택 후 업로드 하면 됩니다. 이후 미디어 라이브러리에서 해당 이미지를 선택하면 등록 됩니다.

워드프레스 에디터 이미지 넣는 방법

워드프레스 에디터 이미지 넣는 방법

이미지에 링크 넣는 방법 입니다. 이미지 선택 후 왼쪽화면에 Link를 선택한 후 urld 을 입력하면 간단히 설정됩니다.

워드프레스 에디터 이미지 넣는 방법

지도

구글 지도 넣기 입니다. 지도 선택 후 원하는 지명이나 명칭을 입력하면 바로 변경되며 보여지길 원하는 크기로 Zoom을 변경하면 됩니다.

워드프레스 에디터 이미지 넣는 방법

워드프레스 에디터 이미지 넣는 방법

동영상 넣기

방법은 동일하나 본인의 동영상 기준으로 등록하려면, 왼쪽 화면에 ‘Source’에서  Self Hosted로 변경후 미디어 라이브러리에서 선택후 삽입하면 됩니다. 

워드프레스 에디터 이미지 넣는 방법

HTML 및 Shortcode

많이 사용하는 기능인 html 및 shortcode 넣기 기능 입니다. 저는 아직 많이 사용하진 않지만 앞으로 많이 쓸 것 같은.. 기능이죠.

워드프레스 에디터 이미지 넣는 방법

워드프레스 에디터 이미지 넣는 방법

Botton 및 Spacer

Botton 은 바로가기를 입력 할때 사용하는 기능이고 Spacer는 문장 사이의 공간을 만들어 주는 기능 입니다.

워드프레스 에디터 이미지 넣는 방법

워드프레스 에디터 이미지 넣는 방법

간단히 Elementor 사용 방법을 소개해봤습니다. 우선 설치한 후 이것저것 해보면 쉽게 사용할 수 있을 거라 생각합니다. 

아직까지는 초보 단계라 아주 기본적으로 필요한 부분만 사용하고 있지만 더많이 사용해 보고 연습하다 보면 고급 스킬까지 알게되길 바래 봅니다.

관련 글