在wordpress中加载iframe中的自定义页面

Question

I am a noob with wordpress and I need a little help, as I think what I'm trying to do shouldn't be too difficult.

I added in one of the pages the necessary functions that render a form with an input text field and a submit button.

When then submit button is pressed I invoke a modal popup which contains another page which is just an html page but contains a form that posts to a php page.

Right now the content of the iframe is externally hosted and everything works fine. However, I haven't been successful in having the content of the iframe migrated locally within the wordpress directories.

I tried copying the html page into the plugins wordpress directory but the resources (images, javascript, css) will not load. I fear just dumping an html file won't be enough and that it needs to be done differently.

Any clues as to how to get this content to render? Does it have to be a new widget, or is this just a new page with a custom template or is there a quick and easy way to get wordpress to render that directory like a normal php directory?

Thank you

Answer 1

Have you checked the file you're trying to move to make sure it doesn't have hard-coded (absolute) references to its files? If it references a JavaScript file like so:

<script src="/some-dir/js/script.js"></script>

and you move the file to /wp-content/plugins/plugin-name/ then it would still be looking for the script file as if it were in the same directory as /wp-content/. Could be other reasons, but that would be my first suggestion to try. Change any absolute references to relative, that is from

<script src="/some-dir/js/script.js"></script>

to

<script src="../js/script.js"></script>